/* =====================================================================
   Club Bear - Calendario de Regalos, Stickers, Cabañas con ❤️,
   Récords de la semana y Postales
   ===================================================================== */

/* ---------- botones nuevos del HUD ---------- */
.hud-x { font-size: 16px; }
.hud-x .hx-icon { font-size: 46px; line-height: 62px; }
.hud-gifts { border-color: #b8326a; background: linear-gradient(#fff0f6, #ffc6dd); color: #7a1a46; }
.hud-gifts.ready .hx-icon { display: inline-block; animation: giftWiggle 1.6s ease-in-out infinite; }
.hud-stickers { border-color: #c48a00; background: linear-gradient(#fffbe6, #ffe48a); color: #6a4a00; }
.hud-post { border-color: #c2453c; background: linear-gradient(#fff6ee, #ffd2b8); color: #7a2a1a; }
/* Regalos: arriba a la izquierda, en el sitio que tenía el mapa */
#stage > .hud-corner-tl { left: 26px; top: 22px; }
/* Mapa: esquina inferior izquierda */
#btnMap { left: 30px; top: auto; bottom: 26px; width: 112px; height: 112px; }
#btnMap svg { width: 70px; height: 66px; }
/* buzón de sugerencias (solo lo ve Silver): esquina inferior derecha */
#stage > .hud-mail { left: auto !important; right: 30px; top: auto; bottom: 26px; }
@keyframes giftWiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-14deg) scale(1.1); } 80% { transform: rotate(12deg) scale(1.1); } 90% { transform: rotate(-6deg); } }

/* =====================================================================
   🎁 Calendario de Regalos
   ===================================================================== */
.gift-box { position: relative; width: 1360px; padding: 28px 40px 30px; border-radius: 34px; font-family: var(--font); text-align: center;
  background: radial-gradient(circle at 15% 0, #fff 0, transparent 40%), linear-gradient(#fff4f9, #ffe0ec); border: 8px solid #b8326a; box-shadow: 0 18px 0 rgba(0,0,0,.25); }
.gift-box .x-btn { right: 20px; top: 20px; }
.gift-box h2 { margin: 0; font: 700 52px var(--font); color: #b8326a; text-shadow: 0 3px 0 #fff; }
.gift-sub { margin: 4px auto 16px; max-width: 1000px; font: 500 22px/1.3 var(--font); color: #6a3a52; }
.gift-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; }
.gift-cell { position: relative; height: 120px; border-radius: 20px; background: #fff; border: 4px solid #f2bcd2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.gift-cell small { font: 700 17px var(--font); color: #a86a86; }
.gift-cell .gc-ic { font-size: 44px; line-height: 1; }
.gift-cell .gc-ic .coin { font-size: 46px; }
.gift-cell .gc-bear { width: 70px; height: 80px; display: block; }
.gift-cell .gc-bear svg { width: 100%; height: 100%; overflow: visible; }
.gift-cell .gc-frame { position: relative; width: 50px; height: 62px; display: grid; place-items: center; border-width: 4px; }
.gift-cell .gc-frame::after { content: '🌠'; font-size: 26px; }
.gift-cell.big { background: radial-gradient(circle at 50% 30%, #fffbe0, #ffe48a); border-color: #e0a91c; box-shadow: 0 0 0 3px rgba(255,210,60,.45); }
.gift-cell.big3 { background: radial-gradient(circle at 50% 30%, #f4fdff, #b9ecff); border-color: #3f9fd6; box-shadow: 0 0 18px rgba(120,210,255,.8); }
.gift-cell.done { opacity: .55; }
.gift-cell.done .gc-check { position: absolute; inset: 0; display: grid; place-items: center; font: 800 64px var(--font); font-style: normal; color: #35a632; text-shadow: 0 3px 0 #fff; transform: rotate(-12deg); }
.gift-cell.next { border-color: #35a632; box-shadow: 0 0 0 5px rgba(53,166,50,.35); animation: giftNext 1.2s ease-in-out infinite alternate; }
.gift-cell.just { animation: giftJust .8s cubic-bezier(.3,1.6,.5,1); }
@keyframes giftNext { to { transform: translateY(-5px); } }
@keyframes giftJust { 0% { transform: scale(1.4) rotate(-6deg); } 100% { transform: none; } }
.gift-goal { margin: 16px 0 0; font: 600 24px var(--font); color: #8a5a00; }
.gift-foot { margin-top: 16px; min-height: 90px; display: grid; place-items: center; }
.gift-open { animation: giftNext .9s ease-in-out infinite alternate; }
.gift-wait { margin: 0; font: 600 24px var(--font); color: #4a3a52; }
.gift-got { padding: 14px 30px; border-radius: 24px; background: #fff; border: 4px dashed #35a632; color: #2a4a2a; font: 600 24px var(--font); }
.gift-got b { font-size: 30px; color: #2c8a29; }
.gift-got ul { list-style: none; margin: 8px 0; padding: 0; }
.gift-got small { color: #8a7a62; }
.gift-got.wow { border: 5px solid #e0a91c; background: radial-gradient(circle at 50% 0, #fffbe0, #fff); box-shadow: 0 0 30px rgba(255,200,40,.6); animation: giftJust .8s cubic-bezier(.3,1.6,.5,1); }

/* pelajes del calendario */
svg.skin-aurora { filter: drop-shadow(0 0 8px rgba(110,240,200,.7)) drop-shadow(0 0 18px rgba(150,120,255,.45)); }
svg.skin-crystal { filter: drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 18px rgba(120,210,255,.75)); }

/* Tarjeta Aurora Boreal */
#card.frame-frmAurora, .mini-card.frame-frmAurora {
  --cf-bg: radial-gradient(ellipse 120% 40% at 50% 8%, rgba(110,240,200,.55), transparent 60%), radial-gradient(ellipse 90% 30% at 30% 22%, rgba(160,120,255,.45), transparent 60%), linear-gradient(170deg, #12284a, #0c1a33 60%, #070f22);
  --cf-bd: #7fe8c8; --cf-text: #e6fff6; --cf-in: rgba(127,232,200,.4);
  --cf-inv: linear-gradient(160deg, #16305a, #0c1a33); --cf-arrow: linear-gradient(90deg, #12284a, #2f5a8a);
  --cf-flake: #4fd6b0; --cf-flake-bd: #b8a4ff;
}
#card.frame-frmAurora .card-frame, .mini-card.frame-frmAurora { animation: auroraGlow 4s ease-in-out infinite; }
@keyframes auroraGlow { 0%, 100% { box-shadow: inset 0 0 0 6px rgba(127,232,200,.4), 0 18px 0 rgba(0,0,0,.25), 0 0 20px rgba(110,240,200,.45); }
  50% { box-shadow: inset 0 0 0 6px rgba(184,164,255,.55), 0 18px 0 rgba(0,0,0,.25), 0 0 40px rgba(150,120,255,.6); } }
.frame-frmAurora .card-name, .frame-frmAurora .mc-name { color: #eafff8; text-shadow: 0 3px 0 #0c1a33, 0 0 14px #6ff2c4; }
#card.frame-frmAurora #inventory h3, #card.frame-frmAurora .inv-help, #card.frame-frmAurora .inv-empty { color: #c8fff2; }
.frame-frmAurora .icicles { filter: hue-rotate(120deg) brightness(1.15); }
.frame-frmAurora .cf-deco i { display: block; color: #fff; text-shadow: 0 0 10px #9ffff0; animation: cfTwinkle 2.4s ease-in-out infinite; }
.frame-frmAurora .cf-deco i::before { content: '✦'; }
.frame-frmAurora .cf-deco .d1 { left: 18px; top: 96px; font-size: 34px; }
.frame-frmAurora .cf-deco .d2 { right: 20px; top: 140px; font-size: 24px; animation-delay: .7s; }
.frame-frmAurora .cf-deco .d3 { left: 14px; bottom: 150px; font-size: 22px; animation-delay: 1.3s; }
.frame-frmAurora .cf-deco .d4 { right: 16px; bottom: 90px; font-size: 36px; animation-delay: 1.9s; color: #c8b4ff; }
.frame-frmAurora .cf-deco .d5 { left: 44%; bottom: 8px; font-size: 22px; animation-delay: .4s; }
.frame-frmAurora .cf-deco .d6 { right: 32%; top: 10px; font-size: 20px; animation-delay: 1.1s; color: #9ffff0; }
.sw-frmAurora { background: radial-gradient(ellipse 120% 40% at 50% 15%, rgba(110,240,200,.8), transparent 60%), linear-gradient(170deg, #12284a, #070f22); border-color: #7fe8c8 !important; }
.frame-sw-big.sw-frmAurora::after { content: '🌠'; }

/* Tarjeta de Campeón */
#card.frame-frmChamp, .mini-card.frame-frmChamp {
  --cf-bg: radial-gradient(circle at 50% 0, #fffbe0 0, transparent 45%), linear-gradient(165deg, #ffe48a, #f2b51c 55%, #c98a0a);
  --cf-bd: #8a5a00; --cf-text: #4a2a00; --cf-in: rgba(255,250,220,.7);
  --cf-inv: linear-gradient(160deg, #fff8dc, #ffe7a0); --cf-arrow: linear-gradient(90deg, #f2b51c, #ffe48a);
  --cf-flake: #c98a0a; --cf-flake-bd: #fff1b0;
}
#card.frame-frmChamp .card-frame, .mini-card.frame-frmChamp { animation: champGlow 2.2s ease-in-out infinite; }
@keyframes champGlow { 0%, 100% { box-shadow: inset 0 0 0 6px rgba(255,250,220,.6), 0 18px 0 rgba(0,0,0,.25), 0 0 14px rgba(255,200,40,.5); }
  50% { box-shadow: inset 0 0 0 6px rgba(255,255,240,.95), 0 18px 0 rgba(0,0,0,.25), 0 0 36px rgba(255,200,40,.9); } }
.frame-frmChamp .card-name, .frame-frmChamp .mc-name { color: #fff; text-shadow: 0 3px 0 #8a5a00, 0 0 12px #ffe48a; }
.frame-frmChamp .icicles { filter: sepia(1) saturate(4) hue-rotate(-10deg) brightness(1.05); }
.frame-frmChamp .cf-deco i { display: block; }
.frame-frmChamp .cf-deco .d1, .frame-frmChamp .cf-deco .d2 { top: 74px; font-size: 54px; filter: drop-shadow(0 2px 0 #8a5a00); }
.frame-frmChamp .cf-deco .d1::before { content: '🏆'; }
.frame-frmChamp .cf-deco .d2::before { content: '🏆'; }
.frame-frmChamp .cf-deco .d1 { left: 12px; transform: rotate(-12deg); }
.frame-frmChamp .cf-deco .d2 { right: 12px; transform: rotate(12deg); }
.frame-frmChamp .cf-deco .d3, .frame-frmChamp .cf-deco .d4, .frame-frmChamp .cf-deco .d5, .frame-frmChamp .cf-deco .d6 { color: #fff; text-shadow: 0 0 10px #fff6b0; animation: cfTwinkle 1.8s ease-in-out infinite; }
.frame-frmChamp .cf-deco .d3::before, .frame-frmChamp .cf-deco .d4::before, .frame-frmChamp .cf-deco .d5::before, .frame-frmChamp .cf-deco .d6::before { content: '★'; }
.frame-frmChamp .cf-deco .d3 { left: 16px; bottom: 130px; font-size: 30px; }
.frame-frmChamp .cf-deco .d4 { right: 18px; bottom: 80px; font-size: 38px; animation-delay: .6s; }
.frame-frmChamp .cf-deco .d5 { left: 46%; bottom: 6px; font-size: 26px; animation-delay: 1.1s; }
.frame-frmChamp .cf-deco .d6 { left: 30%; top: 8px; font-size: 22px; animation-delay: 1.5s; }
.sw-frmChamp { background: radial-gradient(circle at 50% 10%, #fffbe0 0 20%, transparent 21%), linear-gradient(165deg, #ffe48a, #f2b51c 55%, #c98a0a); border-color: #8a5a00 !important; }
.frame-sw-big.sw-frmChamp::after { content: '🏆'; }

/* =====================================================================
   🌟 Stickers
   ===================================================================== */
.stk-box { position: relative; width: 1320px; max-height: 960px; overflow: auto; display: flex; flex-direction: column; padding: 26px 36px 24px; border-radius: 34px; font-family: var(--font);
  background: repeating-linear-gradient(0deg, transparent 0 46px, rgba(120,170,230,.18) 46px 48px), linear-gradient(#fffdf4, #fff3cf); border: 8px solid #c48a00; box-shadow: 0 18px 0 rgba(0,0,0,.25); }
.stk-box .x-btn { right: 20px; top: 20px; }
.stk-head { display: flex; align-items: center; gap: 18px; }
.stk-head h2 { margin: 0; font: 700 50px var(--font); color: #a86a00; text-shadow: 0 3px 0 #fff; }
.stk-count { padding: 4px 18px; border-radius: 18px; background: #c48a00; color: #fff; font: 700 28px var(--font); }
#stkBody { overflow-y: auto; padding-right: 8px; }
#stkBody h3 { margin: 14px 0 8px; font: 700 28px var(--font); color: #7a4a00; }
.stk-week { display: flex; align-items: center; gap: 22px; margin-top: 12px; padding: 12px 22px; border-radius: 24px; background: #fff; border: 4px dashed #e0a91c; }
.stk-week.done { border-style: solid; border-color: #35a632; background: #f2fff0; }
.stk-week > div { flex: 1; text-align: left; }
.stk-week b { font-size: 28px; color: #6a4a00; }
.stk-week p { margin: 4px 0; font: 500 22px var(--font); color: #4a3a20; }
.stk-week small { font: 600 18px var(--font); color: #a8541a; }
.stk-pic { display: grid; place-items: center; width: 120px; height: 120px; transform: rotate(var(--tilt, 0deg)); }
.stk-pic img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 4px 3px rgba(60,40,0,.25)); }
.stk-pic.big { width: 130px; height: 130px; flex: none; }
.stk-pic img.mystery { filter: brightness(0) opacity(.25); }
.stk-tip { margin: 12px 0 0; font: 500 21px var(--font); color: #5a4a30; }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)); gap: 12px; }
.stk-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 20px; background: rgba(255,255,255,.75);
  min-width: 0; min-height: 174px; color: #3d2a12; border: 4px solid #e6cf8d; box-shadow: 0 3px 0 rgba(105,74,20,.12); font-family: var(--font); text-align: center; cursor: default; }
.stk-cell .stk-pic { width: 100px; height: 100px; }
.stk-cell .stk-pic img { width: 100%; height: 100%; object-fit: contain; }
.stk-cell[data-stk="luciernaga"] .stk-pic,
.stk-cell[data-stk="bellotaOro"] .stk-pic,
.stk-cell[data-stk="botellaMar"] .stk-pic { width: 84px; height: 84px; margin-bottom: 12px; }
.stk-cell:not(.have) .stk-pic img { filter: brightness(0) opacity(.18); }
.stk-cell b { width: 100%; font-size: 20px; color: #422c0c; line-height: 1.16; overflow-wrap: anywhere; }
.stk-cell small { max-width: 100%; font-size: 16px; line-height: 1.18; color: #594321; }
.stk-cell:disabled { opacity: 1; }
.stk-cell.have { cursor: pointer; background: #fff; }
.stk-cell.have:hover { transform: translateY(-4px); border-color: #e0a91c; }
.stk-cell.have:hover .stk-pic { transform: rotate(0) scale(1.08); transition: transform .2s; }
.stk-cell.on { border-color: #35a632; background: #f2fff0; }
.stk-cell.on small { color: #2c8a29; font-weight: 700; }
.stk-new { position: absolute; top: -10px; right: -6px; padding: 2px 8px; border-radius: 10px; background: #e8323c; color: #fff; font: 700 14px var(--font); font-style: normal; transform: rotate(8deg); }

/* sticker escondido en el suelo */
.stk-floor { position: absolute; transform: translate(-50%, -85%); cursor: pointer; animation: stkBob 2.4s ease-in-out infinite; }
.stk-floor img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255,255,220,.9)); transform: rotate(-8deg); }
.stk-floor i { position: absolute; width: 16px; height: 16px; background: radial-gradient(circle, #fff 0 30%, transparent 70%); animation: stkSpark 1.8s ease-in-out infinite; pointer-events: none; }
.stk-floor i:nth-of-type(1) { left: -6px; top: 10%; }
.stk-floor i:nth-of-type(2) { right: -4px; top: 40%; animation-delay: .6s; }
.stk-floor i:nth-of-type(3) { left: 40%; top: -10px; animation-delay: 1.2s; }
.stk-floor:hover img { filter: drop-shadow(0 0 10px #fff6b0) brightness(1.1); }
.stk-floor.got { animation: stkGot .8s ease-in forwards; pointer-events: none; }
@keyframes stkBob { 50% { transform: translate(-50%, -95%); } }
@keyframes stkSpark { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes stkGot { to { transform: translate(-50%, -260%) scale(1.8) rotate(20deg); opacity: 0; } }
.stk-toast { cursor: pointer; }
.stk-toast img { width: 72px; height: 72px; object-fit: contain; transform: rotate(-8deg); }

/* stickers pegados en la tarjeta */
#cardStickers { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
#cardStickers img { position: absolute; width: 118px; height: 118px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); }
#cardStickers .cs-0 { left: 10px; top: 12px; transform: rotate(-12deg); }
#cardStickers .cs-1 { right: 10px; top: 16px; transform: rotate(10deg); }
#cardStickers .cs-2 { right: 14px; bottom: 70px; transform: rotate(-5deg); }

/* =====================================================================
   🏠 Cabañas y ❤️
   ===================================================================== */
#cabinBar { position: absolute; right: 30px; top: 100px; z-index: 1900; display: flex; align-items: center; gap: 14px;
  padding: 8px 12px 8px 22px; border-radius: 26px; background: rgba(255,250,240,.95); border: 4px solid #7a3a1e; box-shadow: 0 5px 0 rgba(0,0,0,.2);
  font: 700 24px var(--font); color: #5a2a10; white-space: nowrap; }
#cabinBar.home { padding-right: 22px; }
#cabinBar .cb-count { padding: 2px 14px; border-radius: 16px; background: #ffe0ea; color: #b8326a; }
#cabinBar .btn.small { font-size: 20px; padding: 6px 16px; }
.cb-heart { position: absolute; left: 50%; top: 20px; font-size: 34px; font-style: normal; pointer-events: none; animation: cbHeart 1.3s ease-out forwards; }
@keyframes cbHeart { 0% { transform: translate(-50%, 0) scale(.4); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), 160px) scale(1.2); opacity: 0; } }
#cardHearts { position: absolute; left: 14px; bottom: 14px; z-index: 4; padding: 4px 14px; border-radius: 18px; border: 3px solid #fff; background: rgba(184,50,106,.9);
  color: #fff; font: 700 22px var(--font); box-shadow: 0 3px 0 rgba(0,0,0,.2); cursor: pointer; }
#cardHearts:hover { transform: translateY(-2px); }
#cardHearts[hidden] { display: none; }
.card-actions { display: flex; gap: 10px; align-items: center; }
.card-actions[hidden], .card-icon-btn[hidden] { display: none !important; }
.card-icon-btn { width: 64px; height: 64px; flex: none; border: 4px solid var(--cf-bd, #2d5f93); border-radius: 18px; background: linear-gradient(#ffffff, #dff0ff);
  font-size: 32px; box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.card-icon-btn:hover { transform: translateY(-2px); }

/* =====================================================================
   🏆 Récords de la semana
   ===================================================================== */
.rank-modes { display: flex; gap: 10px; margin-bottom: 12px; }
.rank-modes button { flex: 1; padding: 10px; border-radius: 18px; border: 4px solid #d9b25a; background: #fff; font: 700 24px var(--font); color: #8a5a00; }
.rank-modes button.on { background: linear-gradient(#ffd85a, #f2b51c); border-color: #8a5a00; color: #4a2a00; }
.wk-loading { text-align: center; font: 600 24px var(--font); color: #8a6a30; padding: 30px 0; }
.rank-gap { text-align: center; font: 700 26px var(--font); color: #b8a070; }
.rank-box.wk-mode .rank-note { font-size: 20px; line-height: 1.35; }
.label.champ .nametag::after { content: ' 👑'; }
#cardName.champ::after { content: ' 👑'; }

/* =====================================================================
   💌 Postales
   ===================================================================== */
.post-box { position: relative; width: 1400px; max-height: 960px; display: flex; flex-direction: column; padding: 26px 36px 26px; border-radius: 34px; font-family: var(--font);
  background: linear-gradient(#fffaf2, #fbe8d6); border: 8px solid #c2453c; box-shadow: 0 18px 0 rgba(0,0,0,.25); }
.post-box .x-btn { right: 20px; top: 20px; }
.post-box h2 { margin: 0 0 12px; text-align: center; font: 700 50px var(--font); color: #b8362c; }
#postBody { display: flex; flex-direction: column; min-height: 0; }
.post-tabs { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.post-tabs button { padding: 10px 30px; border-radius: 20px; border: 4px solid #e6b49a; background: #fff; font: 700 26px var(--font); color: #8a3a2a; }
.post-tabs button.on { background: linear-gradient(#ff8a72, #e2523c); border-color: #9a2a1a; color: #fff; }
.post-tabs i { font-style: normal; display: inline-block; min-width: 30px; margin-left: 6px; padding: 0 6px; border-radius: 15px; background: #e8323c; color: #fff; font-size: 20px; }
.post-tabs button.on i { background: #fff; color: #c2453c; }
.post-list { display: grid; gap: 10px; max-height: 640px; overflow-y: auto; padding-right: 6px; }
.post-item { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-radius: 20px; background: #fff; border: 4px solid #f0d6c4; text-align: left; font-family: var(--font); }
.post-item:hover { border-color: #e2523c; transform: translateY(-2px); }
.post-item.unread { border-color: #e2523c; background: #fff4ee; }
.post-item.unread .pi-text b::after { content: ' ● nueva'; color: #e2523c; font-size: 18px; }
.pi-thumb { width: 120px; height: 72px; flex: none; border-radius: 12px; background-size: cover; background-position: center; border: 3px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.pi-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pi-text b { font-size: 26px; color: #5a2a1a; }
.pi-text small { font-size: 20px; color: #7a5a4a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-date { font: 600 17px var(--font); color: #a0806a; white-space: nowrap; }
.post-empty { padding: 40px; text-align: center; color: #6a4a3a; }
.post-empty div { font-size: 90px; }
.post-empty b { font-size: 32px; }
.post-empty p { font: 500 24px var(--font); }
.post-row { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }

/* la postal */
.postcard { display: grid; grid-template-columns: 1fr 1fr; width: 640px; height: 380px; border-radius: 14px; background: #fffdf6; box-shadow: 0 8px 18px rgba(60,30,10,.3); overflow: hidden; transform: rotate(-1.5deg); }
.postcard.big { width: 1000px; height: 560px; margin: 0 auto; }
.pc-photo { position: relative; background-size: cover; background-position: center; border: 10px solid #fff; border-right-width: 5px; }
.pc-photo span { position: absolute; left: 10px; bottom: 10px; padding: 2px 12px; border-radius: 10px; background: rgba(255,255,255,.9); font: 700 18px var(--font); color: #5a2a1a; }
.pc-back { position: relative; padding: 24px 22px 18px; background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(160,120,90,.25) 38px 40px) 0 108px / 100% calc(100% - 150px) no-repeat, #fffdf6; display: flex; flex-direction: column; }
.pc-stamp { position: absolute; right: 16px; top: 14px; width: 80px; height: 97px; }
.pc-stamp img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc-stamp span { position: absolute; left: 14%; top: 13%; right: 14%; bottom: 13%; background-size: cover; background-position: center; border-radius: 3px; }
.pc-postmark { position: absolute; right: 70px; top: 40px; width: 130px; opacity: .8; transform: rotate(-10deg); pointer-events: none; }
.pc-text { flex: 1; margin: 110px 0 8px; font: 600 26px/40px var(--font); color: #2a3a6a; overflow-wrap: anywhere; overflow: hidden; }
.postcard.big .pc-text { font-size: 34px; line-height: 50px; margin-top: 140px; }
.postcard.big .pc-stamp { width: 110px; height: 133px; }
.postcard.big .pc-postmark { width: 180px; right: 100px; }
.pc-lines { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; font-size: 18px; color: #7a5a4a; }
.pc-lines b { color: #b8362c; font-size: 22px; }
.post-write { display: grid; grid-template-columns: 1fr 680px; gap: 26px; align-items: start; }
.pw-left { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pw-left label { font: 700 24px var(--font); color: #8a3a2a; margin-top: 6px; }
.pw-left label small { float: right; font-size: 18px; color: #a0806a; }
.pw-left select, .pw-left textarea { font: 600 24px var(--font); padding: 10px 14px; border-radius: 16px; border: 4px solid #e6b49a; background: #fff; color: #3a2a2a; outline: none; resize: none; }
.pw-left select:focus, .pw-left textarea:focus { border-color: #e2523c; }
.pw-designs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pw-designs button { height: 62px; border-radius: 12px; border: 4px solid #fff; background-size: cover; background-position: center; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.pw-designs button.on { border-color: #e2523c; transform: scale(1.06); }
.pw-phrases { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pw-phrases button { padding: 4px 12px; border-radius: 14px; border: 3px solid #f0d6c4; background: #fff; font: 600 18px var(--font); color: #6a3a2a; }
.pw-phrases button:hover { border-color: #e2523c; }
.pw-right { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 10px; }
.pw-msg { margin: 6px 0 0; min-height: 30px; font: 600 20px var(--font); color: #8a3a2a; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .hud-gifts.ready .hx-icon, .gift-cell.next, .gift-open, .stk-floor, .stk-floor i { animation: none; }
}