/* =====================================================================
   Club Bear - Mansión Embrujada, minijuegos, moderación, táctil y ajustes
   ===================================================================== */

/* ---------- marcador de la misión ---------- */
.mansion-tracker { position: absolute; left: 24px; top: 250px; z-index: 2600; display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px;
  border-radius: 20px; border: 4px solid #2a6a3a; background: linear-gradient(#e8ffe8, #bff2c8); font: 600 20px var(--font); color: #1d4a28; box-shadow: 0 4px 0 rgba(0,0,0,.2); cursor: pointer; }
.mansion-tracker span { font-size: 26px; }

/* ---------- madera del jardín ---------- */
.wood-drop { position: absolute; transform: translate(-50%, -80%); cursor: pointer; pointer-events: auto; animation: woodBob 2.2s ease-in-out infinite; filter: drop-shadow(0 6px 4px rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(255,220,140,.6)); }
.wood-drop img { width: 100%; display: block; }
.wood-drop.got { animation: woodGot .6s ease-out forwards; }
@keyframes woodBob { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
@keyframes woodGot { to { transform: translate(-50%, -200%) scale(.4); opacity: 0; } }

/* ---------- conversación con el cuadro / el gato ---------- */
.mt-box { display: flex; gap: 26px; width: 1180px; padding: 30px 36px; border-radius: 30px; border: 6px solid #2a6a3a; color: #e8ffe8;
  background: radial-gradient(circle at 15% 20%, rgba(125,255,140,.25), transparent 50%), linear-gradient(160deg, #1a3a2a, #0e1f17); box-shadow: 0 18px 0 rgba(0,0,0,.3), 0 0 40px rgba(125,255,140,.35); }
.mt-box.cat { border-color: #4a3a6a; background: radial-gradient(circle at 15% 20%, rgba(125,255,140,.2), transparent 50%), linear-gradient(160deg, #241a33, #0d0a14); }
.mt-portrait { flex: none; width: 210px; height: 280px; border-radius: 18px; border: 8px solid #8a6a2a; box-shadow: inset 0 0 0 4px #c9a050, 0 0 30px rgba(125,255,140,.5);
  background: url(../assets/mansion-dentro.webp) no-repeat; background-size: 2000px 1116px; background-position: -680px -165px; animation: mtGlow 2.4s ease-in-out infinite; }
.mt-portrait.cat { border-color: #2a2238; background-size: 1100px 614px; background-position: -560px -90px; box-shadow: 0 0 30px rgba(125,255,140,.45); }
@keyframes mtGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25) saturate(1.2); } }
.mt-body { flex: 1; min-width: 0; }
.mt-name { font: 700 30px var(--font); color: #9dff9a; margin-bottom: 6px; }
.mt-body p { font: 500 25px/1.35 var(--font); margin: 8px 0; }
.mt-btns { display: flex; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.mt-prizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 12px 0 4px; }
.mt-prizes.one { grid-template-columns: 240px; }
.mt-prize { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.08); border: 3px solid rgba(157,255,154,.5); }
.mt-prize b { font: 600 18px var(--font); text-align: center; }
.mt-card-bg { width: 110px; height: 150px; border-radius: 12px; background-size: cover; background-position: center; border: 4px solid #2b2b36; }
.frame-sw-big.mini { width: 110px !important; height: 150px !important; }
.mt-bear { width: 110px; height: 160px; }
.mt-bear svg { width: 100%; height: 100%; overflow: visible; }
.mt-big { font-size: 80px; line-height: 150px; }

/* ---------- marco espectral ---------- */
#card.frame-frmSpectral, .mini-card.frame-frmSpectral {
  --cf-bg: radial-gradient(circle at 50% 0, rgba(125,255,140,.35), transparent 55%), linear-gradient(165deg, #0e2a20, #123a2a 50%, #071510);
  --cf-bd: #7dff6a; --cf-text: #d8ffe0; --cf-in: rgba(125,255,140,.4);
  --cf-inv: linear-gradient(160deg, #16382a, #0a1c14); --cf-arrow: linear-gradient(90deg, #123a2a, #1f5a40);
  --cf-flake: #2bbf4a; --cf-flake-bd: #9dff9a;
}
#card.frame-frmSpectral .card-frame, .mini-card.frame-frmSpectral { animation: specGlow 2.6s ease-in-out infinite; }
@keyframes specGlow { 0%, 100% { box-shadow: inset 0 0 0 6px rgba(125,255,140,.35), 0 18px 0 rgba(0,0,0,.25), 0 0 18px rgba(125,255,140,.45); } 50% { box-shadow: inset 0 0 0 6px rgba(125,255,140,.6), 0 18px 0 rgba(0,0,0,.25), 0 0 42px rgba(125,255,140,.85); } }
.frame-frmSpectral .card-name, .frame-frmSpectral .mc-name { color: #d8ffe0; text-shadow: 0 3px 0 #0a2a18, 0 0 14px #7dff6a; }
#card.frame-frmSpectral #inventory h3, #card.frame-frmSpectral .inv-help, #card.frame-frmSpectral .inv-empty { color: #bfffd0; }
.frame-frmSpectral .icicles { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44'%3E%3Cpath d='M0 0h120v8c-4 0-6 3-7 12-1 9-8 9-8 0 0-7-3-12-10-12-6 0-8 5-9 22-1 10-9 10-9 0 0-14-4-22-11-22-5 0-7 4-8 10-1 6-7 6-7 0 0-6-4-10-10-10-6 0-8 6-9 16-1 8-8 8-8 0 0-10-3-16-8-16H0z' fill='%23aaffb8' fill-opacity='.85' stroke='%231d6a3a' stroke-width='3'/%3E%3C/svg%3E"); }
.frame-frmSpectral .cf-deco i { display: block; font-size: 38px; opacity: .55; animation: specFloat 6s ease-in-out infinite; filter: drop-shadow(0 0 8px #7dff6a); }
.frame-frmSpectral .cf-deco i::before { content: '👻'; }
.frame-frmSpectral .cf-deco .d1 { left: 10px; top: 110px; } .frame-frmSpectral .cf-deco .d2 { right: 12px; top: 170px; animation-delay: 1.5s; font-size: 30px; }
.frame-frmSpectral .cf-deco .d3 { left: 14px; bottom: 120px; animation-delay: 3s; font-size: 28px; } .frame-frmSpectral .cf-deco .d4 { right: 16px; bottom: 70px; animation-delay: 2.2s; }
.frame-frmSpectral .cf-deco .d5, .frame-frmSpectral .cf-deco .d6 { width: 220px; height: 120px; border-radius: 50%; background: radial-gradient(ellipse, rgba(125,255,140,.35), transparent 70%); opacity: 1; filter: none; }
.frame-frmSpectral .cf-deco .d5::before, .frame-frmSpectral .cf-deco .d6::before { content: ''; }
.frame-frmSpectral .cf-deco .d5 { left: -60px; bottom: 30px; animation: specMist 7s ease-in-out infinite; } .frame-frmSpectral .cf-deco .d6 { right: -60px; top: 60px; animation: specMist 8s ease-in-out infinite reverse; }
@keyframes specFloat { 0%, 100% { transform: translateY(0) rotate(-6deg); opacity: .3; } 50% { transform: translateY(-16px) rotate(6deg); opacity: .75; } }
@keyframes specMist { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(60px); } }
.sw-frmSpectral { background: radial-gradient(circle at 50% 10%, rgba(125,255,140,.55), transparent 50%), linear-gradient(165deg, #0e2a20, #123a2a 50%, #071510); border-color: #7dff6a !important; box-shadow: 0 0 14px rgba(125,255,140,.6) !important; }
.frame-sw-big.sw-frmSpectral::after { content: '👻'; }

/* ---------- pelaje espectral y gato negro ---------- */
svg.skin-spectral { filter: drop-shadow(0 0 8px rgba(125,255,140,.85)) drop-shadow(0 0 20px rgba(125,255,140,.4)); animation: specFlicker 3.2s ease-in-out infinite; }
@keyframes specFlicker { 0%, 100% { opacity: .95; } 45% { opacity: .78; } 50% { opacity: .9; } 55% { opacity: .75; } }
svg.cos-blackCat { filter: drop-shadow(0 0 6px rgba(125,255,140,.35)); }

/* ---------- minijuegos de la mansión ---------- */
.mg { position: absolute; inset: 0; z-index: 3300; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; font-family: var(--font); }
.mg-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.55) saturate(.9); }
.mg-field { position: absolute; inset: 0; }
.mg-hud { position: absolute; left: 0; right: 0; top: 18px; display: flex; justify-content: center; align-items: center; gap: 18px; z-index: 5; pointer-events: none; }
.mg-pill { padding: 10px 24px; border-radius: 30px; background: rgba(10,25,18,.8); border: 4px solid #7dff6a; color: #e8ffe8; font: 600 30px var(--font); box-shadow: 0 0 16px rgba(125,255,140,.4); }
.mg-pill .lost { opacity: .25; font-style: normal; }
.mg-timer { width: 520px; height: 26px; border-radius: 14px; background: rgba(10,25,18,.8); border: 4px solid #7dff6a; overflow: hidden; }
.mg-timer i { display: block; height: 100%; background: linear-gradient(90deg, #ff6a6a, #ffd23f 40%, #7dff6a); transition: width .1s linear; }
.mg-quit { position: absolute; right: 24px; top: 18px; z-index: 8; width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; background: rgba(0,0,0,.5); color: #fff; font-size: 30px; cursor: pointer; }
.mg-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9; width: 860px; padding: 34px 44px; border-radius: 30px; text-align: center; color: #e8ffe8;
  background: linear-gradient(160deg, rgba(26,58,42,.97), rgba(14,31,23,.97)); border: 6px solid #7dff6a; box-shadow: 0 0 50px rgba(125,255,140,.5); }
.mg-card h2 { margin: 0 0 12px; font: 700 42px var(--font); color: #b8ffb5; }
.mg-card p { font: 500 25px/1.4 var(--font); margin: 8px 0; }
.mg-card .row { margin-top: 20px; }
.mg-pop { position: absolute; z-index: 7; transform: translate(-50%, -50%); font: 700 32px var(--font); text-shadow: 0 3px 0 rgba(0,0,0,.6); pointer-events: none; animation: mgPop .9s ease-out forwards; white-space: nowrap; }
@keyframes mgPop { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -70px; } }

/* fantasmas */
.mg-ghosts .mg-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; --lx: 1000px; --ly: 560px;
  background: radial-gradient(circle 260px at var(--lx) var(--ly), rgba(255,250,210,.0) 0, rgba(255,250,210,.06) 55%, rgba(5,10,20,.55) 100%); }
.mg-ghost { position: absolute; left: 0; top: 0; width: 150px; z-index: 3; pointer-events: none; filter: drop-shadow(0 0 14px rgba(200,255,220,.8)); transition: opacity .15s; }
.mg-ghost.phased { opacity: .22; }
.mg-ghost.caught { animation: ghostCaught .4s ease-out forwards; }
.mg-ghost.escaping { opacity: .5; }
@keyframes ghostCaught { to { opacity: 0; filter: drop-shadow(0 0 30px #7dff6a) brightness(2); scale: 1.6; } }

/* gatos */
.mg-cat { position: absolute; width: 190px; height: 190px; transform: translate(-50%, -50%); border: 0; background: transparent; cursor: pointer; z-index: 3; --glow: 0; }
.mg-cat-ring { position: absolute; inset: 0; border-radius: 50%; border: 5px dashed rgba(255,246,160,.75); animation: catRing 4s linear infinite; }
/* gato lleno: sin aro, solo corazones que suben de vez en cuando */
.mg-cat.full .mg-cat-ring { opacity: 0; }
.mg-cat.full::before, .mg-cat.full::after { content: '💕'; position: absolute; left: 40%; top: 10%; font-size: 46px; opacity: 0; pointer-events: none; animation: catHeart 3.2s ease-out infinite; }
.mg-cat.full::after { content: '💚'; left: 62%; animation-delay: 1.6s; }
@keyframes catHeart { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; transform: translateY(-20px) scale(1); } 60% { opacity: 0; transform: translateY(-110px) scale(1.1); } 100% { opacity: 0; } }
@keyframes catRing { to { transform: rotate(360deg); } }
.mg-wish { position: absolute; left: 50%; top: -86px; transform: translateX(-50%); width: 92px; height: 82px; border-radius: 26px; background: #fff; border: 4px solid #2b2b36; font-size: 50px; line-height: 74px; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.mg-wish::after { content: ''; position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); border: 10px solid transparent; border-top: 12px solid #2b2b36; }
.mg-hearts { position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); display: flex; gap: 4px; font: 700 30px var(--font); }
.mg-hearts i { font-style: normal; color: rgba(255,255,255,.35); text-shadow: 0 2px 0 #000; }
.mg-hearts i.on { color: #7dff6a; }
.mg-cat.yum { animation: catYum .4s ease-out; } .mg-cat.hiss { animation: catHiss .4s ease-out; }
@keyframes catYum { 50% { transform: translate(-50%, -50%) scale(1.15); } }
@keyframes catHiss { 20%, 60% { transform: translate(-54%, -50%); } 40%, 80% { transform: translate(-46%, -50%); } }
.mg-tray { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 22px; z-index: 6; padding: 14px 24px; border-radius: 30px; background: rgba(10,25,18,.85); border: 4px solid #7dff6a; }
.mg-food { width: 150px; height: 130px; border-radius: 24px; border: 5px solid #5a7a62; background: #f6fff4; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mg-food span { font-size: 64px; line-height: 1; }
.mg-food small { font: 700 20px var(--font); color: #2a4a32; }
.mg-food.on { border-color: #ffd23f; background: #fff6c8; transform: translateY(-8px); box-shadow: 0 0 22px rgba(255,210,63,.8); }
.mg-key { position: absolute; left: 50%; top: 45%; width: 420px; transform: translate(-50%, -50%); z-index: 8; border: 0; background: transparent; padding: 0; cursor: pointer;
  animation: keyDrop 1.4s cubic-bezier(.2,1.4,.4,1) forwards, keyFloat 2s ease-in-out 1.4s infinite; filter: drop-shadow(0 0 30px #7dff6a); }
.mg-key img { width: 100%; display: block; pointer-events: none; }
.mg-key span { display: block; margin-top: 10px; font: 700 30px var(--font); color: #eaffd8; text-shadow: 0 3px 0 #0a2a18, 0 0 12px #7dff6a; animation: keyHint 1.2s ease-in-out infinite; }
.mg-key:hover { filter: drop-shadow(0 0 46px #b8ffb5) brightness(1.15); }
.mg-key.got { animation: keyGot .7s ease-in forwards; }
@keyframes keyFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -18px; } }
@keyframes keyHint { 50% { opacity: .55; } }
@keyframes keyGot { to { transform: translate(-50%, -160%) scale(.3) rotate(25deg); opacity: 0; } }
@keyframes keyDrop { from { transform: translate(-50%, -260%) rotate(-30deg) scale(.4); opacity: 0; } to { transform: translate(-50%, -50%) rotate(0) scale(1); opacity: 1; } }

/* duelo */
.mg-runes { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; gap: 26px; z-index: 6; }
.mg-rune { width: 190px; height: 170px; border-radius: 30px; border: 6px solid #4a3a6a; background: linear-gradient(#2a2038, #140f1e); font-size: 90px; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.mg-rune.lit { background: linear-gradient(#7dff6a, #2bbf4a); border-color: #eaffd8; box-shadow: 0 0 50px #7dff6a; transform: scale(1.12); }
.mg-rune.press { background: linear-gradient(#ffe36b, #ffb81f); transform: scale(.94); }
.mg-say { position: absolute; left: 50%; top: 120px; transform: translateX(-50%); z-index: 6; padding: 14px 30px; border-radius: 26px; background: rgba(10,8,18,.85); border: 4px solid #7dff6a; color: #e8ffe8; font: 700 32px var(--font); white-space: nowrap; }
.mg-say.show { animation: sayIn .35s ease-out; }
@keyframes sayIn { from { transform: translate(-50%, -14px); opacity: 0; } }
.mg-paw { position: absolute; width: 170px; height: 170px; transform: translate(-50%, -50%); z-index: 7; border-radius: 50%; border: 6px solid #ff6a6a; background: radial-gradient(circle, rgba(40,10,20,.9), rgba(120,20,40,.85));
  font-size: 90px; cursor: pointer; animation: pawIn var(--t, 1000ms) linear forwards; box-shadow: 0 0 30px rgba(255,80,80,.7); }
.mg-paw.blocked { animation: none; border-color: #7dff6a; background: radial-gradient(circle, rgba(20,60,30,.9), rgba(10,30,15,.9)); scale: .8; opacity: .6; }
@keyframes pawIn { from { scale: .5; } 80% { scale: 1.15; } to { scale: 1.3; opacity: .8; } }
.mg-duel.hurt { animation: duelHurt .35s; } .mg-duel.hit .mg-bg { animation: duelHit .5s; }
@keyframes duelHurt { 30% { box-shadow: inset 0 0 160px rgba(255,40,40,.8); } }
@keyframes duelHit { 30% { filter: brightness(1.4) saturate(1.5) hue-rotate(60deg); transform: translateX(14px); } 60% { transform: translateX(-10px); } }
.mg-duel.vanish .mg-bg { animation: catVanish 2s ease-in forwards; }
@keyframes catVanish { to { filter: brightness(.9) saturate(.2) blur(6px); opacity: .5; } }

/* ---------- vendedor del Candy Shop ---------- */
.seller-say { position: absolute; left: 715px; top: 698px; transform: translate(-50%, -100%); z-index: 6000; padding: 10px 20px; border-radius: 22px; background: #fff; color: #5a2a00;
  font: 700 24px var(--font); white-space: normal; width: max-content; max-width: 440px; text-align: center; box-shadow: 0 5px 0 rgba(0,0,0,.2); border: 3px solid #f28a1d; pointer-events: none; animation: sellerIn .3s ease-out; }
.seller-say::after { content: ''; position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); border: 10px solid transparent; border-top: 12px solid #f28a1d; }
@keyframes sellerIn { from { opacity: 0; margin-top: 12px; } }

/* ---------- moderación ---------- */
.card-mod { position: absolute; right: 24px; top: 92px; z-index: 3; border: 4px solid #2b2b36; border-radius: 16px; background: linear-gradient(#ffe36b, #ffb81f); font: 700 20px var(--font); color: #3a2a00; padding: 6px 12px; cursor: pointer; }
.card-mod[hidden] { display: none; }
.mod-box { position: relative; width: 820px; padding: 30px 40px; border-radius: 30px; background: linear-gradient(160deg, #fff6d8, #ffe9a8); border: 6px solid #b8820c; font-family: var(--font); color: #3a2a00; box-shadow: 0 18px 0 rgba(0,0,0,.25); }
.mod-box .x-btn { position: absolute; right: 18px; top: 18px; }
.mod-box h2 { margin: 0 0 10px; font-size: 36px; }
.mod-sub { font: 500 20px var(--font); opacity: .8; }
.mod-box input, .mod-box textarea { width: 100%; font: 600 20px var(--font); padding: 10px 14px; border-radius: 12px; border: 3px solid #b8820c; margin: 8px 0 12px; }
.mod-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; font-size: 22px; }
.mod-row b { width: 150px; }
.mod-on { padding: 4px 12px; border-radius: 12px; background: #ffd0d0; color: #8a1a1a; font: 600 16px var(--font); }
.mod-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 6px 0; border-radius: 14px; background: rgba(255,255,255,.7); font-size: 20px; }
.mod-item small { flex: 1; opacity: .8; }

/* ---------- pantallas táctiles ---------- */
html.touch, html.touch body { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
html.touch #stage { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
html.touch #icField, html.touch #fgField, html.touch #ffField, html.touch #teleGame canvas, html.touch #djGame, html.touch .mg { touch-action: none; }
html.touch .inv-grid, html.touch .of-list, html.touch #catSoon, html.touch .news-list, html.touch .cat-items { touch-action: pan-y; }
.tpad { display: none; }
html.touch .tpad { display: flex; position: absolute; z-index: 50; gap: 20px; }
.tpad button { width: 150px; height: 150px; border-radius: 34px; border: 6px solid #fff; background: rgba(20,40,70,.55); color: #fff; font-size: 64px; box-shadow: 0 6px 0 rgba(0,0,0,.3); touch-action: none; }
.tpad button.down { background: rgba(255,210,63,.75); transform: scale(.94); }
.tpad-ice { left: 40px; right: 40px; bottom: 40px; justify-content: space-between; pointer-events: none; }
.tpad-ice button { pointer-events: auto; }
.tpad-tele { right: 50px; bottom: 60px; width: 460px; height: 330px; display: block !important; }
html:not(.touch) .tpad-tele { display: none !important; }
.tpad-tele button { position: absolute; width: 140px; height: 140px; }
.tpad-tele .up { left: 160px; top: 0; } .tpad-tele .down { left: 160px; bottom: 0; } .tpad-tele .left { left: 0; top: 95px; } .tpad-tele .right { right: 0; top: 95px; }
html.touch .hud-btn, html.touch .hud-map { min-width: 70px; min-height: 70px; }
#rotateHint { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: rgba(13,36,64,.96); color: #fff; font-family: 'Fredoka', sans-serif; text-align: center; }
#rotateHint div { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 20px; }
#rotateHint span { font-size: 64px; animation: rotHint 2s ease-in-out infinite; }
#rotateHint b { font-size: 26px; } #rotateHint small { font-size: 16px; opacity: .85; }
#rotateHint button { margin-top: 10px; padding: 10px 22px; border-radius: 20px; border: 0; background: #ffd23f; font: 700 18px 'Fredoka', sans-serif; }
@keyframes rotHint { 50% { transform: rotate(90deg); } }

/* ---------- buzón de sugerencias (solo Silver) ---------- */
.hud-mail { left: 380px; border-color: #b8820c; background: linear-gradient(#fff6d8, #ffe08a); color: #6a4a00; font-size: 16px; }
.hud-mail .mail-icon { font-size: 46px; line-height: 62px; }
.hud-mail.ring { animation: mailRing .9s ease-in-out 2; }
@keyframes mailRing { 15%, 45%, 75% { transform: rotate(-12deg); } 30%, 60%, 90% { transform: rotate(12deg); } }
.sug-box { position: relative; width: 860px; max-height: 900px; padding: 30px 40px; border-radius: 30px; background: linear-gradient(160deg, #fffaf0, #ffeac2); border: 6px solid #b8820c;
  font-family: var(--font); color: #4a3200; box-shadow: 0 18px 0 rgba(0,0,0,.25); }
.sug-box .x-btn { position: absolute; right: 18px; top: 18px; }
.sug-box h2 { margin: 0 0 8px; font-size: 38px; }
.sug-box p { font: 500 22px/1.35 var(--font); margin: 6px 0; }
.sug-box textarea { width: 100%; font: 500 22px/1.4 var(--font); padding: 14px 16px; border-radius: 16px; border: 4px solid #d8b060; resize: none; outline: none; margin-top: 10px; }
.sug-box textarea:focus { border-color: #f2b51c; }
.sug-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.sug-foot small { font: 600 18px var(--font); opacity: .7; }
.sug-note { font-size: 17px !important; opacity: .8; }
.mail-list { max-height: 720px; overflow-y: auto; padding-right: 8px; display: grid; gap: 12px; margin-top: 10px; }
.mail-item { padding: 14px 18px; border-radius: 18px; background: #fff; border: 4px solid #e8d0a0; }
.mail-item.new { border-color: #f2b51c; box-shadow: 0 0 0 4px rgba(242,181,28,.25); }
.mail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 22px; }
.mail-head small { margin-left: auto; font: 500 16px var(--font); opacity: .7; }
.mail-acct { padding: 2px 10px; border-radius: 10px; background: #dff3d8; color: #2a6a2a; font: 600 14px var(--font); }
.mail-acct.guest { background: #eee; color: #666; }
.mail-new { padding: 2px 10px; border-radius: 10px; background: #e8323c; color: #fff; font: 700 14px var(--font); }
.mail-item p { margin: 8px 0 6px; font: 500 21px/1.4 var(--font); white-space: pre-wrap; word-break: break-word; }
.mail-btns { display: flex; justify-content: flex-end; }
.mail-empty { text-align: center; padding: 30px 0; }

/* ---------- selector de controles (inicio) ---------- */
.ctrl-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 4px; }
.ctrl-pick span { font: 700 20px var(--font); color: #34506e; }
.ctrl-pick div { display: flex; gap: 8px; }
.ctrl-pick button { padding: 10px 24px; border-radius: 16px; border: 4px solid #9bc0e0; background: #fff; font: 700 21px var(--font); color: #34506e; cursor: pointer; }
.ctrl-pick button.on { border-color: #f2b51c; background: #fff6d8; color: #6a4a00; box-shadow: 0 0 0 3px rgba(242,181,28,.3); }