@import url('./animations/pigeon.css');

/* Performance: avoid work for offscreen pages */
main.page:not(.active){
  content-visibility:auto;
  contain-intrinsic-size: 800px 600px; /* reserve space hint */
}
/* Performance: hint frequent animators to GPU, keep modest */
.cloud,.backgroundPigeon,#pWrap,.sidePigeon,.nest-svg{ will-change: transform; }
/* Respect reduced motion: disable heavy animations BUT keep essential pigeon wing flaps */
@media (prefers-reduced-motion: reduce){
  *:not(.wing-left):not(.wing-right):not(.hatchling-wing-left):not(.hatchling-wing-right):not(.juv-sit-wing-left):not(.juv-sit-wing-right):not(.adult-sit-wing-left):not(.adult-sit-wing-right):not(.old-sit-wing-left):not(.old-sit-wing-right){ animation:none !important; transition:none !important; }
}
:root{--bg:#0b1016;--card:#111924;--ink:#e8eff8;--muted:#9bb2c7;--brand:#4da3ff;--brand2:#76beff;--danger:#ff5968;--ok:#38d39f;--glass:rgba(255,255,255,.06);--pigeon-svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'><defs><radialGradient id='g' cx='50%' cy='40%' r='70%'><stop offset='0' stop-color='%23dfe9f5'/><stop offset='1' stop-color='%23859bb1'/></radialGradient></defs><path d='M24 78c16-8 22-28 48-28 20 0 34 12 34 26 0 13-14 26-32 26-12 0-22-4-30-12-6 2-16 0-20-12z' fill='url(%23g)'/><circle cx='108' cy='50' r='12' fill='url(%23g)'/><circle cx='112' cy='48' r='3' fill='%23000'/><path d='M118 52l10-4-10-4v8z' fill='%23f6b652'/><path d='M42 82c8 8 12 20 36 20-11 7-28 7-38-1-6-5-10-10-12-18 6 2 10 1 14-1z' fill='%23b7c6d6'/><g class='wings'><path d='M48 60c-20-10-26-26-20-34 10 8 22 16 30 28z' fill='%23aabccd' opacity='.85'/><path d='M78 60c20-10 26-26 20-34-10 8-22 16-30 28z' fill='%23aabccd' opacity='.85'/></g></svg>");--tree-svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'><rect x='56' y='64' width='16' height='50' rx='6' fill='%238c5a30'/><circle cx='64' cy='52' r='34' fill='%2359b36a'/><circle cx='44' cy='56' r='22' fill='%2367c27a'/><circle cx='84' cy='56' r='22' fill='%2367c27a'/></svg>");}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}html,body{margin:0;padding:0;height:100%;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);overflow:hidden}a{color:#9fd0ff;text-decoration:none}a:hover{text-decoration:underline}input,select,textarea{width:100%;border:1px solid #243141;background:#0e151e;color:var(--ink);border-radius:12px;padding:12px 14px;font-size:15px;outline:none;-webkit-user-select:text;user-select:text}textarea{resize:vertical}.hidden{display:none!important}header{height:64px;background:linear-gradient(180deg,#0f1723,#0b1016);display:flex;align-items:center;justify-content:space-between;padding:0 14px;box-shadow:0 6px 24px #0008;position:sticky;top:0;z-index:3}#logo{font-weight:900;letter-spacing:.6px;font-size:20px;cursor:pointer}#topControls{display:flex;align-items:center;gap:10px}.icon{width:40px;height:40px;border-radius:12px;background:var(--glass);border:1px solid #1c2733;display:grid;place-items:center;cursor:pointer;font-size:18px}#topProfilePic{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #1d2a36;cursor:pointer}main.page{display:none;height:calc(100dvh - 64px);position:relative;overflow:hidden}main.page.active{display:grid;place-items:center}#page-auth.active{background:radial-gradient(1100px 600px at 80% 0%,#17253b 0%,#0b1016 60%)}#page-hub.active,#page-chats.active,#page-chat.active,#page-profile.active,#page-settings.active,#page-sent.active,#page-blocked.active,#page-moderator.active,#page-pigeons.active{display:block;place-items:unset}#hud{position:fixed;left:0;right:0;bottom:0;display:flex;gap:16px;align-items:center;justify-content:center;font-weight:700;z-index:500;background:transparent;padding:16px 20px;pointer-events:none}.chip{background:rgba(45,70,55,0.92);border:2px solid rgba(100,145,110,0.6);padding:8px 16px;border-radius:16px;display:flex;align-items:center;gap:8px;transition:transform .2s,border-color .2s,box-shadow .2s;backdrop-filter:blur(8px);font-size:16px;box-shadow:0 3px 12px rgba(0,0,0,0.4),inset 0 1px 3px rgba(150,200,160,0.2);pointer-events:auto}.chip:hover{border-color:rgba(120,170,130,0.8);box-shadow:0 4px 16px rgba(0,0,0,0.5),inset 0 1px 3px rgba(150,200,160,0.3)}.chip.bump{animation:bump .4s}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}.auth-card{width:min(520px,92vw);background:var(--card);border:1px solid #1a2430;border-radius:18px;padding:22px 20px;box-shadow:0 30px 80px #000a}.auth-card button{background:linear-gradient(135deg,#4da3ff,#76beff);border:none;color:#fff;padding:12px 24px;font-size:16px;font-weight:700;border-radius:12px;cursor:pointer;transition:.2s;margin:4px 0;width:100%;box-shadow:0 4px 16px rgba(77,163,255,0.4)}.auth-card button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(77,163,255,0.6)}.row{display:grid;gap:10px;margin:10px 0}.swap{display:flex;gap:6px;justify-content:center}#page-hub .stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}.sky{position:absolute;inset:0;background:radial-gradient(1600px 900px at 20% -10%,#1a3d5c 0%,#2d5a7b 20%,#0b1016 55%);will-change:transform;transition:background 2s}.sky.night{background:radial-gradient(1600px 900px at 6% -10%,#0a1420 0%,#050a10 55%)}.sun{position:absolute;width:90px;height:90px;background:#ffe84d;border-radius:50%;opacity:0;pointer-events:none;cursor:pointer;transition:opacity 1s ease;transform:translate(-50%,-50%);will-change:left,top,opacity;z-index:2}.sun.visible{opacity:1;pointer-events:auto}.moon{position:absolute;width:70px;height:70px;background-color:#e8e8c8;background:radial-gradient(circle at 38% 35%,#fffef7 0%,#f5f5dc 30%,#e8e8c8 58%,#d4d4aa 82%,#bfc08c 100%);border-radius:50%;box-shadow:none;opacity:0;pointer-events:none;cursor:pointer;transition:opacity 1s ease,transform .2s ease;transform:translate(-50%,-50%);backface-visibility:hidden;will-change:left,top,opacity,transform}.moon.visible{opacity:0.92;pointer-events:auto}.moon:hover{transform:translate(-50%,-50%) translateZ(0) scale(1.08)}.cloud{position:absolute;width:280px;height:90px;background:#ffffff18;border-radius:120px;filter:blur(2px);animation:cloud 180s linear infinite;cursor:pointer;transition:opacity .3s;opacity:0.8}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;width:140px;height:140px;border-radius:50%}.cloud:before{top:-54px;left:20px}.cloud:after{top:-38px;right:30px}@keyframes cloud{0%{left:-300px}100%{left:110%}}.hill{position:absolute;bottom:-100px;right:-5%;width:45%;height:260px;pointer-events:auto;z-index:2;cursor:pointer}.hill::before{content:'';position:absolute;width:480px;height:240px;border-radius:50% 50% 50% 50%/54% 54% 46% 46%;background:radial-gradient(ellipse at 50% 70%,rgba(45,68,58,0.9) 0%,rgba(35,58,48,0.75) 40%,rgba(25,45,35,0.45) 70%,transparent 92%);right:0;bottom:0;transform:rotate(2deg);pointer-events:none;transition:opacity .3s}.hill:active::before{opacity:0.88}#pWrap{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);z-index:1;animation:tilt 6s ease-in-out infinite;filter:drop-shadow(3px 4px 6px rgba(0,0,0,0.2))}@keyframes tilt{0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}50%{transform:translate(-50%,-50%) rotate(2.5deg)}}#myPigeon{width:136px;height:136px;cursor:pointer}@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}#myPigeon .wing-left{transform-origin:68px 60px;animation:wingFlapLeft 1.2s ease-in-out infinite}#myPigeon .wing-right{transform-origin:76px 66px;animation:wingFlapRight15 1.2s ease-in-out infinite}#myPigeon .left-foot{transform-origin:65.5px 106.5px}#myPigeon .right-foot{transform-origin:73.5px 107px}@keyframes wingFlapLeft{0%,100%{transform:rotate(0)}50%{transform:rotate(-25deg)}}@keyframes wingFlapRight{0%,100%{transform:rotate(0)}50%{transform:rotate(25deg)}}@keyframes footGripLeft{0%,100%{transform:rotate(0)}50%{transform:rotate(-1deg)}}@keyframes footGripRight{0%,100%{transform:rotate(0)}50%{transform:rotate(1deg)}}@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}#incomingLeft,#incomingRight{position:absolute;bottom:62px;width:28%;height:60%;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;pointer-events:none;z-index:400}#incomingLeft{left:3%}#incomingRight{right:3%}.sidePigeon{pointer-events:auto;width:84px;height:84px;background:var(--pigeon-svg) no-repeat center/contain;transition:transform .16s;animation:sideBob 4.4s ease-in-out infinite, wingFlap 3s ease-in-out infinite;cursor:pointer;filter:drop-shadow(2px 2px 3px rgba(0,0,0,0.2))}@keyframes sideBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}.flyAway{animation:flyAway 1.1s ease forwards}@keyframes flyAway{to{transform:translate(0,-220px) scale(.6);opacity:0}}#treeWrap{position:absolute;bottom:48px;left:10%;text-align:center;z-index:100;pointer-events:auto}#tree{width:68px;height:68px;background:var(--tree-svg) no-repeat center/contain;cursor:pointer;transition:transform .2s;filter:drop-shadow(2px 3px 5px rgba(0,0,0,0.3))}#tree:hover{transform:scale(1.06)}#particleLayer{position:absolute;inset:0;pointer-events:none;z-index:2}.floor{display:none}.mountain{position:absolute;bottom:62px;pointer-events:none;z-index:0;opacity:0.3;filter:blur(3px)}.mountain.left{left:-5%;width:0;height:0;border-left:250px solid transparent;border-right:280px solid transparent;border-bottom:340px solid rgba(35,55,50,0.5)}.mountain.center{left:28%;width:0;height:0;border-left:320px solid transparent;border-right:320px solid transparent;border-bottom:420px solid rgba(38,58,52,0.55)}.mountain.right{right:-5%;width:0;height:0;border-left:280px solid transparent;border-right:260px solid transparent;border-bottom:360px solid rgba(36,56,51,0.52)}.list{display:grid;gap:8px;padding:14px;overflow-y:auto;height:100%;align-content:start}.chatItem{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:14px;background:#132031;border:1px solid #1a2430;transition:.14s;cursor:pointer;min-height:fit-content}.chatItem:hover{transform:translateY(-2px)}.chatAva{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid#1e2a37;cursor:pointer}.chatName{font-weight:900;font-size:0.95rem}.chatLast{opacity:.85;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.rowC{display:flex;align-items:center;gap:8px}.chatNameSection{flex-shrink:0}.chatLastMessage{max-width:300px}.chatMeta{flex-shrink:0}#page-chat .wrap{display:grid;grid-template-rows:auto 1fr auto;height:100%}#chatHeader{display:flex;align-items:center;gap:12px;padding:10px;border-bottom:1px solid #1a2430}#chatAva{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #1c2733;cursor:pointer}#chatName{font-weight:900;cursor:pointer}#chatName:hover{text-decoration:underline}#chatMessages{background:#0e151e;border:1px solid #1a2430;border-radius:16px;padding:12px;min-height:320px;max-height:55vh;overflow:auto;scroll-behavior:smooth;margin:10px;display:flex;flex-direction:column;align-items:flex-start}.msg{max-width:72%;margin:10px 0;padding:12px 14px;border-radius:3px;word-wrap:break-word;white-space:pre-wrap;box-shadow:0 2px 8px rgba(0,0,0,0.3),inset 0 1px 2px rgba(255,255,255,0.1);position:relative;font-family:'Lucida Handwriting','Brush Script MT','Segoe Script',cursive;font-size:14px;line-height:1.6}.msg::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.02) 2px,rgba(255,255,255,0.02) 4px);pointer-events:none;border-radius:inherit}.from-me{margin-left:auto;background:linear-gradient(135deg,#e8dfc8 0%,#d4c5a8 100%);color:#2c2416;border:2px solid #b8a88a;box-shadow:0 3px 10px rgba(0,0,0,0.4),inset 0 1px 3px rgba(255,255,255,0.3)}.from-them{background:linear-gradient(135deg,#f2ede0 0%,#e0d5be 100%);color:#2c2416;border:2px solid #c4b49a;box-shadow:0 3px 10px rgba(0,0,0,0.4),inset 0 1px 3px rgba(255,255,255,0.3)}.msg img{max-width:100%;border-radius:4px;margin-top:8px;border:1px solid rgba(139,115,85,0.3)}#composer{display:flex;gap:8px;align-items:center;margin:10px;padding:8px}#composer input[type=file]{display:none}.ghost{background:transparent;border:1px dashed #314151;color:#a9bed2;padding:9px 12px;border-radius:12px;cursor:pointer}#page-profile .profileWrap{max-width:860px;margin:0 auto;padding:10px;overflow-y:auto;height:100%}.settingsCard{background:#132031;border:1px solid #1a2430;padding:14px;border-radius:14px}.selfHeader{display:grid;place-items:center;gap:6px;margin-bottom:8px}.selfPfp{width:118px;height:118px;border-radius:50%;object-fit:cover;border:3px solid #203040;cursor:pointer;transition:.16s}.selfPfp:hover{transform:scale(1.01)}.selfName{font-weight:900;font-size:20px}.selfMeta{display:flex;gap:8px;opacity:.9}.selfDesc{margin-top:10px}.rowSplit{display:flex;gap:10px;flex-wrap:wrap}#settingsWrap{max-width:100%;width:100%;margin:0;padding:10px}#settingsWrap .rowSplit{max-width:860px;margin:0 auto}.modal{position:fixed;inset:0;background:#0009;display:none;align-items:center;justify-content:center;z-index:200}.modal.show{display:flex}.modalCard{width:min(92vw,540px);background:#111924;border:1px solid#1a2430;border-radius:16px;padding:16px;max-height:90vh;overflow-y:auto}.modalHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.closeX{cursor:pointer;font-size:22px}.sendCard{width:min(92vw,560px)}.filters{display:grid;gap:10px;background:#0f151e;border:1px dashed #243141;border-radius:12px;padding:10px}.rangeWrap{display:grid;gap:6px}.rangeRow{display:flex;align-items:center;gap:10px}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:6px;background:#1d2a37;border-radius:6px;outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#4da3ff;border:2px solid #cfe7ff}.toggle{display:flex;gap:10px;align-items:center}.tbtn{border:1px solid #243141;background:#0e151e;border-radius:12px;padding:8px 12px;cursor:pointer;user-select:none}.tbtn.active{border-color:#4da3ff;box-shadow:0 0 0 1px #4da3ff33 inset}#toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,rgba(17,26,38,0.95),rgba(20,30,42,0.95));border:2px solid rgba(77,163,255,0.4);padding:14px 20px;border-radius:14px;font-weight:800;font-size:16px;box-shadow:0 8px 32px rgba(0,0,0,0.5),0 0 20px rgba(77,163,255,0.2);opacity:0;pointer-events:none;z-index:101;transition:.3s;backdrop-filter:blur(10px);min-width:200px;text-align:center}#toast.showT{opacity:1;transform:translateX(-50%) translateY(10px)}.formGrid{display:grid;gap:10px}.loader{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.leaf{position:absolute;width:10px;height:10px;background:#67c27a;border-radius:50% 0;pointer-events:none;opacity:0;animation:leafFall 3.5s ease-out forwards}@keyframes leafFall{0%{opacity:1;transform:translate(0,0) rotate(0deg)}100%{opacity:0;transform:translate(var(--dx),180px) rotate(720deg)}}.shake{animation:treeShake .6s ease}@keyframes treeShake{0%,100%{transform:rotate(0)}10%,30%,50%,70%,90%{transform:rotate(-8deg)}20%,40%,60%,80%{transform:rotate(8deg)}}.bounce{animation:bounceAnim .5s ease}@keyframes bounceAnim{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}.pulse{animation:pulseAnim .8s ease}@keyframes pulseAnim{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}.wiggle{animation:wiggleAnim .6s ease}@keyframes wiggleAnim{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}.pop{animation:popAnim .4s cubic-bezier(.68,-0.55,.265,1.55)}@keyframes popAnim{0%{transform:scale(0)}100%{transform:scale(1)}}.wave{animation:waveAnim 1s ease}@keyframes waveAnim{0%,100%{transform:rotate(0)}25%{transform:rotate(15deg)}50%{transform:rotate(-15deg)}75%{transform:rotate(10deg)}}.flip{animation:flipAnim .6s ease}@keyframes flipAnim{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}.feather{position:absolute;width:20px;height:40px;background:linear-gradient(45deg,#fff 0%,#ddd 50%,#fff 100%);border-radius:50% 50% 50% 0;pointer-events:none;opacity:0;animation:featherFloat 2.5s ease-out forwards}@keyframes featherFloat{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(120px) rotate(180deg) translateX(var(--drift,20px))}}.paperGain{animation:paperGain .6s ease}@keyframes paperGain{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.2);filter:brightness(1.5) drop-shadow(0 0 20px var(--ok))}100%{transform:scale(1);filter:brightness(1)}}.staminaDrain{animation:staminaDrain .4s ease}@keyframes staminaDrain{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(0.9);filter:brightness(1.3) drop-shadow(0 0 15px var(--danger))}100%{transform:scale(1);filter:brightness(1)}}.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 3px #fff;animation:twinkle 6s ease-in-out infinite}@keyframes twinkle{0%,100%{opacity:0}50%{opacity:0.6}}.grass{position:absolute;bottom:0;left:0;right:0;height:62px;pointer-events:none;z-index:5;background:linear-gradient(180deg,rgba(60,95,72,0.88) 0%,rgba(65,100,75,0.92) 40%,rgba(70,105,80,0.96) 100%);border-top:3px solid rgba(85,130,95,0.7);box-shadow:0 -4px 20px rgba(0,0,0,0.3),inset 0 2px 8px rgba(120,160,130,0.25)}.grass::before{content:"";position:absolute;top:0;left:0;right:0;height:100%;background:repeating-linear-gradient(90deg,transparent,transparent 4px,rgba(85,125,95,0.3) 4px,rgba(85,125,95,0.3) 5px);opacity:0.4;animation:grassSway 5s ease-in-out infinite}@keyframes grassSway{0%,100%{transform:skewX(0deg)}50%{transform:skewX(1.5deg)}}.bgHill{position:absolute;bottom:-80px;pointer-events:none;z-index:1;opacity:0.75;filter:blur(0.8px)}.bgHill.left{left:5%;width:40%;height:220px}.bgHill.left::before{content:'';position:absolute;width:380px;height:200px;border-radius:50% 50% 50% 50%/55% 55% 45% 45%;background:radial-gradient(ellipse at 50% 65%,rgba(60,88,75,0.85) 0%,rgba(50,78,65,0.65) 45%,rgba(40,68,55,0.35) 75%,transparent 90%);left:0;bottom:0;transform:rotate(-4deg)}.bgHill.right{right:8%;width:38%;height:235px}.bgHill.right::before{content:'';position:absolute;width:400px;height:215px;border-radius:50% 50% 50% 50%/57% 57% 43% 43%;background:radial-gradient(ellipse at 50% 65%,rgba(65,92,78,0.88) 0%,rgba(55,82,68,0.68) 45%,rgba(45,72,58,0.38) 75%,transparent 90%);right:0;bottom:0;transform:rotate(3deg)}.raindrop{position:absolute;width:2px;height:12px;background:linear-gradient(180deg,rgba(100,180,255,0.7) 0%,rgba(100,180,255,0.3) 100%);border-radius:0 0 50% 50%;pointer-events:none;animation:rainFall 1s linear forwards;z-index:1}.raindrop.small{height:8px;opacity:0.6}@keyframes rainFall{0%{transform:translateY(0);opacity:1}100%{transform:translateY(300px);opacity:0}}.pondFillBar{display:none}.pondFillProgress{display:none}.pond{position:absolute;bottom:8px;right:3%;width:56px;height:38px;cursor:pointer;transition:transform .2s;z-index:102;border-radius:50%;overflow:hidden;pointer-events:auto}.pond:hover{transform:scale(1.08)}.pondEarth{position:absolute;width:100%;height:100%;border-radius:50%;background:radial-gradient(ellipse at 40% 40%,#6b5038 0%,#5a4230 40%,#4a3528 100%);box-shadow:0 2px 6px rgba(0,0,0,0.4),inset 0 -1px 3px rgba(0,0,0,0.3);z-index:1;pointer-events:none}.pondWater{position:absolute;bottom:0;left:0;width:100%;border-radius:50%;background:radial-gradient(ellipse at 40% 40%,#4da3d5 0%,#2a7eb8 50%,#1a5a8c 100%);box-shadow:0 1px 4px rgba(77,163,255,0.4),inset 0 1px 2px rgba(150,200,255,0.3);transition:height .4s ease,box-shadow .4s ease;z-index:2;pointer-events:none}.pondWater.low{box-shadow:0 1px 4px rgba(255,140,100,0.4),inset 0 1px 2px rgba(255,180,150,0.2)}.ripple{position:absolute;width:40px;height:20px;border:2px solid rgba(74,163,255,0.4);border-radius:50%;pointer-events:none;animation:rippleExpand 1.5s ease-out forwards}@keyframes rippleExpand{0%{transform:scale(0.5);opacity:1}100%{transform:scale(2);opacity:0}}.achievement{position:fixed;top:80px;right:20px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:12px 16px;border-radius:12px;font-weight:800;box-shadow:0 10px 30px rgba(77,163,255,0.4);opacity:0;transform:translateX(400px);z-index:20;animation:achievementSlide 3s ease-out forwards}@keyframes achievementSlide{0%{opacity:0;transform:translateX(400px)}10%{opacity:1;transform:translateX(0)}90%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(400px)}}.paperAirplane{position:absolute;width:30px;height:30px;pointer-events:none;animation:paperFly 1.2s ease-out forwards}@keyframes paperFly{0%{opacity:1;transform:translate(0,0) rotate(0deg)}100%{opacity:0;transform:translate(200px,-100px) rotate(360deg)}}.timeline{position:relative;padding:10px 0;max-width:600px;margin:0}.timelineItem{display:flex;gap:12px;margin:6px 0;position:relative;min-height:fit-content}.timelineDot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;flex-shrink:0;position:relative;z-index:1}.timelineDot.sent{background:linear-gradient(135deg,#4da3ff,#76beff)}.timelineDot.delivered{background:linear-gradient(135deg,#38d39f,#5de0b3)}.timelineDot.redirected{background:linear-gradient(135deg,#ffa940,#ffc069)}.timelineDot.accepted{background:linear-gradient(135deg,#52c41a,#73d13d)}.timelineDot.rejected{background:linear-gradient(135deg,#ff5968,#ff7a85)}.timelineDot.deleted{background:linear-gradient(135deg,#8c8c8c,#a6a6a6)}.timelineContent{flex:1;background:#0e151e;border:1px solid #1a2430;border-radius:10px;padding:8px;position:relative}.timelineLine{position:absolute;left:14px;top:38px;bottom:-14px;width:2px;background:linear-gradient(180deg,#1a2430 0%,transparent 100%)}.timelineItem:last-child .timelineLine{display:none}.timelineUser{font-weight:800;margin-bottom:2px;font-size:0.95rem}.timelineAction{opacity:0.75;font-size:0.88rem;margin-bottom:2px}.timelineTime{opacity:0.5;font-size:0.8rem}.timelineStamina{display:inline-block;background:rgba(255,89,104,0.15);color:#ff7a85;padding:2px 6px;border-radius:6px;font-size:0.8rem;font-weight:700;margin-top:4px}.routeStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:16px 0}.routeStat{background:#0e151e;border:1px solid #1a2430;border-radius:10px;padding:10px;text-align:center}.routeStatLabel{opacity:0.6;font-size:0.8rem;margin-bottom:4px}.routeStatValue{font-size:1.3rem;font-weight:900}.trackBtn{background:rgba(77,163,255,0.1);border:1px solid #4da3ff;color:#4da3ff;padding:6px 12px;border-radius:8px;font-size:0.85rem;font-weight:700;cursor:pointer;transition:all 0.2s}.trackBtn:hover{background:rgba(77,163,255,0.2);transform:scale(1.05)}.sentItem{display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:14px;background:#132031;border:1px solid #1a2430;transition:.14s;cursor:pointer;position:relative;min-height:fit-content}.sentItem:hover{transform:translateY(-2px)}.sentItem .sentStatus{position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;background:var(--ok)}.sentItem .sentStatus.redirected{background:#ffa940}.sentItem .sentStatus.deleted{background:#8c8c8c}.sentPreview{flex:1;min-width:0}.sentText{opacity:.85;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.sentMeta{display:flex;gap:8px;opacity:.6;font-size:.85rem;margin-top:4px}.sentTrackBtn{padding:6px 10px;background:rgba(77,163,255,0.1);border:1px solid #4da3ff;color:#4da3ff;border-radius:8px;font-size:.8rem;font-weight:700;transition:.2s}.sentTrackBtn:hover{background:rgba(77,163,255,0.2);transform:scale(1.05)}.pondGain{animation:pondGain .6s ease}@keyframes pondGain{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.4) drop-shadow(0 0 25px #4da3ff)}100%{transform:scale(1);filter:brightness(1)}}
.actionMenu{display:none;position:absolute;top:100%;right:0;background:var(--card);border:1px solid #1a2430;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.5);min-width:180px;z-index:10;margin-top:4px}.actionMenu.show{display:block}.actionMenuItem{padding:12px 16px;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:8px;border-bottom:1px solid #1a2430}.actionMenuItem:last-child{border-bottom:none}.actionMenuItem:hover{background:rgba(77,163,255,0.1)}.actionMenuItem.danger{color:var(--danger)}.actionMenuItem.danger:hover{background:rgba(255,89,104,0.1)}.msg{position:relative;user-select:text}.msg.longpress{animation:longpressAnim .6s ease}@keyframes longpressAnim{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}.emojiPicker{display:none;position:fixed;background:var(--card);border:1px solid #1a2430;border-radius:12px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,0.5);z-index:100;max-width:240px;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.emojiPicker.show{display:grid}.emojiBtn{width:40px;height:40px;display:grid;place-items:center;font-size:24px;cursor:pointer;border-radius:8px;transition:.15s}.emojiBtn:hover{background:rgba(77,163,255,0.2);transform:scale(1.1)}.msgReactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.reactionBubble{display:flex;align-items:center;gap:4px;padding:4px 8px;background:rgba(77,163,255,0.1);border:1px solid rgba(77,163,255,0.3);border-radius:12px;font-size:14px;cursor:pointer;transition:.15s}.reactionBubble:hover{background:rgba(77,163,255,0.2);transform:scale(1.05)}.reactionBubble.mine{background:rgba(77,163,255,0.25);border-color:var(--brand)}.reactionCount{font-size:12px;font-weight:700;opacity:0.8}.reportCard{background:#132031;border:1px solid #1a2430;padding:12px;border-radius:12px;margin:8px 0}.reportHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.reportStatus{padding:4px 8px;border-radius:8px;font-size:12px;font-weight:700}.reportStatus.pending{background:rgba(255,169,64,0.2);color:#ffa940}.reportStatus.resolved{background:rgba(56,211,159,0.2);color:var(--ok)}.reportStatus.banned{background:rgba(255,89,104,0.2);color:var(--danger)}.modActions{display:flex;gap:8px;margin-top:8px}
.sidePigeon.landing{animation:landingFlight 2s ease-out forwards,sitBounce 0.3s ease-out 2s}@keyframes landingFlight{0%{transform:translateY(-400px) scale(1.2);opacity:0}50%{opacity:1}100%{transform:translateY(0) scale(0.55);opacity:1}}@keyframes sitBounce{0%{transform:translateY(0) scale(0.55)}50%{transform:translateY(-5px) scale(0.55)}100%{transform:translateY(0) scale(0.55)}}.sidePigeon.sitting{transform:scale(0.55);animation:none;width:65px;height:65px}

/* AI_TAG: FRONTEND_RENDER | Sun SVG rendering (override base .sun circle) */
.sun{ background: #ffe84d !important; background-image: none !important; border-radius: 50% !important; contain: paint !important; }
#sun .sun-sprite{ width:100%; height:100%; display:block; shape-rendering:geometricPrecision; text-rendering:geometricPrecision; pointer-events: none; }

/* AI_TAG: FRONTEND_COMPONENT | XP and level display styling */
.xp-display{background:rgba(17,25,36,0.85);border:1px solid rgba(26,36,48,0.8);border-radius:12px;padding:10px 14px;margin:8px 0;backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.level-badge-container{display:flex;gap:10px;margin-bottom:8px;align-items:center}
.level-badge{display:inline-block;padding:4px 12px;border-radius:12px;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:0.5px;box-shadow:0 2px 6px rgba(0,0,0,0.3)}
.level-badge.tier-hatchling{background:#9e9e9e;color:#fff}
.level-badge.tier-fledgling{background:#cd7f32;color:#fff}
.level-badge.tier-flyer{background:#c0c0c0;color:#333}
.level-badge.tier-voyager{background:#ffd700;color:#333}
.level-badge.tier-navigator{background:#50c878;color:#fff}
.level-badge.tier-pathfinder{background:#0f52ba;color:#fff}
.level-badge.tier-wanderer{background:#e0115f;color:#fff}
.level-badge.tier-wayfinder{background:linear-gradient(45deg,#b9f2ff,#ff00ff);color:#fff}
.level-badge.tier-transcendent{background:linear-gradient(45deg,#ff0080,#ff8c00,#40e0d0,#9370db);background-size:200% 200%;animation:rainbow-shift 3s ease infinite;color:#fff}
@keyframes rainbow-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.streak-badge{display:inline-block;padding:4px 10px;background:rgba(255,107,107,0.2);border:1px solid rgba(255,107,107,0.4);color:#ff6b6b;border-radius:12px;font-size:12px;font-weight:700;cursor:help;transition:.2s}
.streak-badge:hover{background:rgba(255,107,107,0.3);transform:scale(1.05)}
.progress-bar-bg{width:100%;height:20px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,0.3)}
.progress-bar{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);transition:width .5s ease;border-radius:10px;box-shadow:0 0 10px rgba(76,175,80,0.5);position:relative}
.progress-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);animation:shimmer 2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.xp-text-container{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:rgba(255,255,255,0.6);font-weight:600}
.level-up-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .3s ease;backdrop-filter:blur(4px)}
.level-up-content{background:linear-gradient(135deg,#1a2a3a,#0f1a26);padding:40px;border-radius:20px;text-align:center;max-width:420px;animation:scaleIn .5s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(77,163,255,0.3);border:2px solid rgba(77,163,255,0.2)}
.level-up-content h2{font-size:32px;margin:0 0 20px 0;background:linear-gradient(135deg,#4caf50,#8bc34a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.new-level{font-size:56px;font-weight:900;margin:10px 0;background:linear-gradient(135deg,#ffd700,#ff8c00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 20px rgba(255,215,0,0.4)}
.tier-name{font-size:24px;color:#76beff;margin-bottom:20px;font-weight:700}
.level-up-content .rewards{background:rgba(77,163,255,0.1);border:1px solid rgba(77,163,255,0.3);border-radius:12px;padding:16px;margin:20px 0}
.level-up-content .rewards h3{font-size:18px;margin:0 0 12px 0;color:#4da3ff}
.level-up-content .rewards ul{list-style:none;padding:0;margin:0}
.level-up-content .rewards li{padding:6px 0;font-size:15px;color:#a9bed2}
.level-up-content button{background:linear-gradient(135deg,#4da3ff,#76beff);border:none;color:#fff;padding:14px 32px;font-size:16px;font-weight:900;border-radius:12px;cursor:pointer;margin-top:20px;transition:.2s;box-shadow:0 4px 16px rgba(77,163,255,0.4)}
.level-up-content button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(77,163,255,0.6)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
#xp-notifications{position:fixed;top:80px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:1000;pointer-events:none}
.xp-gain-toast{background:linear-gradient(135deg,rgba(76,175,80,0.95),rgba(139,195,74,0.95));border:2px solid rgba(76,175,80,0.6);padding:12px 18px;border-radius:12px;box-shadow:0 4px 16px rgba(76,175,80,0.4);display:flex;align-items:center;gap:10px;transform:translateX(300px);opacity:0;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);backdrop-filter:blur(8px)}
.xp-gain-toast.show{transform:translateX(0);opacity:1}
.xp-amount{font-size:18px;font-weight:900;color:#fff}
.xp-source{font-size:13px;color:rgba(255,255,255,0.9);font-weight:600}
.xp-history-list,.leaderboard-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto;padding:4px}
.xp-history-item{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:12px;transition:.2s}
.xp-history-item:hover{background:rgba(255,255,255,0.05);border-color:rgba(77,163,255,0.3)}
.xp-history-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.xp-amount.positive{color:#4caf50;font-weight:900;font-size:16px}
.xp-amount.negative{color:#ff5968;font-weight:900;font-size:16px}
.xp-description{color:#a9bed2;font-size:14px}
.xp-history-meta{display:flex;gap:10px;font-size:12px;color:rgba(255,255,255,0.5)}
.xp-multiplier{background:rgba(255,215,0,0.2);border:1px solid rgba(255,215,0,0.4);color:#ffd700;padding:2px 6px;border-radius:6px;font-weight:700}
.xp-capped{background:rgba(255,89,104,0.2);border:1px solid rgba(255,89,104,0.4);color:#ff5968;padding:2px 6px;border-radius:6px;font-weight:700}
.leaderboard-item{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:12px;transition:.2s}
.leaderboard-item:hover{background:rgba(255,255,255,0.05);transform:translateY(-2px)}
.leaderboard-item.top-1{background:linear-gradient(135deg,rgba(255,215,0,0.15),rgba(255,215,0,0.05));border-color:rgba(255,215,0,0.5)}
.leaderboard-item.top-2{background:linear-gradient(135deg,rgba(192,192,192,0.15),rgba(192,192,192,0.05));border-color:rgba(192,192,192,0.5)}
.leaderboard-item.top-3{background:linear-gradient(135deg,rgba(205,127,50,0.15),rgba(205,127,50,0.05));border-color:rgba(205,127,50,0.5)}
.leaderboard-rank{font-size:20px;font-weight:900;color:#4da3ff;min-width:40px;text-align:center}
.leaderboard-user{display:flex;align-items:center;gap:10px;flex:1}
.leaderboard-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(77,163,255,0.3)}
.leaderboard-info{flex:1}
.leaderboard-name{font-weight:700;font-size:15px;color:#e8eff8}
.leaderboard-meta{display:flex;gap:8px;margin-top:4px;align-items:center}
.streak-mini{font-size:11px;padding:2px 6px;background:rgba(255,107,107,0.2);border:1px solid rgba(255,107,107,0.3);color:#ff6b6b;border-radius:6px;font-weight:700}
.leaderboard-xp{font-size:16px;font-weight:900;color:#8bc34a}
@media (max-width:680px){
  .xp-display{padding:8px 10px;margin:6px 0}
  .level-badge{font-size:11px;padding:3px 10px}
  .streak-badge{font-size:11px;padding:3px 8px}
  .xp-text-container{font-size:10px}
  #xp-notifications{right:10px;top:70px}
  .xp-gain-toast{padding:10px 14px}
  .level-up-content{padding:30px 20px;max-width:90vw}
  .new-level{font-size:42px}
  .tier-name{font-size:20px}
}
#incomingLeft,#incomingRight{bottom:62px;height:auto;flex-direction:row;justify-content:flex-start;gap:8px;flex-wrap:wrap;max-width:35%}
#incomingLeft{left:3%}
#incomingRight{right:3%}
.letter-msg{max-width:85%!important;background:transparent!important;border:none!important;padding:0!important;order:-1!important;margin:0 auto 20px auto!important;align-self:center!important}.letter-paper{background:linear-gradient(135deg,#f9f5e8 0%,#ede4cc 100%);border:3px solid #8b7355;border-radius:0!important;padding:24px;position:relative;box-shadow:0 8px 24px rgba(0,0,0,0.4),inset 0 2px 8px rgba(255,255,255,0.4),inset 0 0 80px rgba(139,115,85,0.1);font-family:'Lucida Handwriting','Brush Script MT','Segoe Script',cursive}.letter-paper::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(180,160,120,0.08) 2px,rgba(180,160,120,0.08) 4px);pointer-events:none}.letter-fold{position:absolute;top:0;left:0;right:0;height:35px;background:linear-gradient(180deg,rgba(212,197,160,0.25) 0%,transparent 100%);border-bottom:1px dashed rgba(139,115,85,0.3)}.letter-content{font-size:15px;line-height:1.65;color:#2c2416;position:relative;z-index:1;white-space:pre-wrap;word-wrap:break-word}.letter-stamp{position:absolute;top:10px;right:10px;font-size:22px;opacity:0.7;transform:rotate(15deg)}.paper-texture::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(180,160,120,0.05) 2px,rgba(180,160,120,0.05) 4px);pointer-events:none}
.paper-modal{background:linear-gradient(135deg,#f9f5e8 0%,#ede4cc 100%)!important;border:3px solid #d4c5a0!important;box-shadow:0 12px 40px rgba(0,0,0,0.4),inset 0 3px 12px rgba(255,255,255,0.3)!important;position:relative}.paper-modal::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(180,160,120,0.05) 2px,rgba(180,160,120,0.05) 4px);pointer-events:none;border-radius:inherit}.paper-modal .modalHeader{border-bottom:2px dashed rgba(180,160,120,0.3);padding-bottom:12px;margin-bottom:16px}.paper-modal .selfName{color:#2c2416;font-family:'Lucida Handwriting','Brush Script MT','Segoe Script',cursive;font-size:22px}.paper-modal .closeX{color:#8b7355}.paper-modal button{font-family:inherit;background:#8b7355;border:2px solid #6d5a43}.paper-modal button:hover{background:#6d5a43}

/* Letter Compose Modal (Send a letter) - Old-school paper style with no rounded edges */
.letter-compose-modal .modalCard{background:transparent!important;border:none!important;padding:0!important;border-radius:0!important;max-width:780px!important;width:min(92vw,780px)!important;max-height:calc(100vh - 140px)!important;overflow-y:auto}
.letter-compose-paper{background:linear-gradient(135deg,#f9f5e8 0%,#ede4cc 100%);border:2px solid #8b7355;box-shadow:0 8px 28px rgba(0,0,0,0.45),inset 0 1px 6px rgba(255,255,255,0.25),inset 0 0 60px rgba(139,115,85,0.08);position:relative;padding:0;border-radius:0!important;transition:border-color .2s,box-shadow .2s}
.letter-compose-paper::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,transparent,transparent 28px,rgba(180,160,120,0.15) 28px,rgba(180,160,120,0.15) 29px);pointer-events:none;top:28px}
.letter-compose-header{display:flex;justify-content:space-between;align-items:center;padding:6px 0 2px 0;border-bottom:1px solid #d4c5a0;background:rgba(212,197,160,0.08);height:30px}
.letter-compose-title{font-family:'Lucida Handwriting','Brush Script MT','Segoe Script',cursive;font-size:14px;font-weight:700;color:#5a4730;letter-spacing:0.3px;padding-left:20px;position:relative;top:2px}
.letter-style-toggle{margin-right:10px;display:flex;align-items:center;gap:6px;font-family:Inter,system-ui,sans-serif;font-size:12px;color:#5a4730}
.letter-style-toggle button{background:rgba(139,115,85,0.15);border:1px solid #8b7355;color:#5a4730;font-size:13px;padding:4px 8px;cursor:pointer;font-family:Inter,system-ui,sans-serif;border-radius:4px}
.letter-style-toggle button.active{background:#8b7355;color:#f9f5e8}
.text-style-handwritten, textarea.text-style-handwritten{font-family:'Lucida Handwriting','Brush Script MT','Segoe Script',cursive !important;letter-spacing:0.3px}
.text-style-clear, textarea.text-style-clear{font-family:Inter,system-ui,sans-serif !important;letter-spacing:0.2px}
.letter-compose-close{font-size:18px;cursor:pointer;color:#8b7355;transition:.2s;line-height:1;padding:4px 8px 4px 4px}
.letter-compose-close:hover{color:#5a4730;transform:scale(1.1)}
.letter-compose-body{padding:28px 40px 16px 40px;position:relative;z-index:1}
.letter-compose-body textarea{width:100%;border:none;background:transparent;color:#2c2416;padding:0;font-size:16px;font-family:'Lucida Handwriting','Brush Script MT','Segoe Script',cursive;line-height:28px;resize:vertical;min-height:280px;box-shadow:none;border-radius:0!important;-webkit-user-select:text;user-select:text;outline:none}
.letter-compose-body textarea::placeholder{color:#8b7355;opacity:0.5;font-style:italic}
.letter-attach-label{display:inline-flex;align-items:center;justify-content:center;background:rgba(139,115,85,0.12);border:1px solid #c4b590;color:#6d5a43;padding:6px 10px;font-size:20px;cursor:pointer;margin-top:8px;transition:.2s;font-family:Inter,system-ui,sans-serif;line-height:1}
.letter-attach-label:hover{background:rgba(139,115,85,0.2);transform:translateY(-1px)}
.letter-compose-body input[type=file]{display:none}
.letter-compose-filters{background:rgba(212,197,160,0.15);border-top:1px dashed #c4b590;padding:12px 24px 16px 24px;position:relative;z-index:1}
/* --- First Chat Message Letter Display --- */
/* Reuse letter compose paper styling inside chat for the very first message */
#chatMessages .msg.first-letter{max-width:100%;padding:0;margin:24px 0 32px 0;align-self:center;background:transparent;box-shadow:none;position:relative;border:none!important}
#chatMessages .msg.first-letter .letter-compose-paper{width:min(92vw,780px);margin:0 auto;pointer-events:auto}
#chatMessages .msg.first-letter .letter-compose-body{ /* initial compose-style padding (overridden below) */ padding:28px 40px 24px 40px}
#chatMessages .msg.first-letter .letter-compose-body p{margin:0;font-size:16px;line-height:28px;color:#2c2416;font-family:'Lucida Handwriting','Brush Script MT','Segoe Script',cursive;white-space:pre-wrap;word-break:break-word}
/* Make reactions / emoji picker position nicely over the paper */
#chatMessages .msg.first-letter .reactions{margin:0 40px 12px 40px}
/* Meta Footer unter erstem Brief */
#chatMessages .msg.first-letter .letter-first-meta{font-size:12px;text-align:center;font-family:Inter,system-ui,sans-serif;color:#5d4a32;opacity:0.8;margin:2px 0 0 0;letter-spacing:0.3px;display:block;background:none!important;border:none!important;padding:0!important;box-shadow:none!important;position:relative;top:-2px;pointer-events:none}
/* Entfernt Linien-Hintergrund nur im Chat-Kontext */
#chatMessages .msg.first-letter .letter-compose-paper{background:linear-gradient(135deg,#f9f5e8 0%,#ede4cc 100%)!important;border:4px solid #8b7355!important;box-shadow:0 10px 35px rgba(0,0,0,0.45),inset 0 2px 10px rgba(255,255,255,0.25),inset 0 0 60px rgba(139,115,85,0.08)!important;padding:0!important}
/* Linien optional weiterhin entfernt um Streifen/Black-Band-Eindruck zu vermeiden */
#chatMessages .msg.first-letter .letter-compose-paper{background:linear-gradient(135deg,#f9f5e8 0%,#ede4cc 100%)!important;border:4px solid #8b7355;box-shadow:0 10px 30px rgba(0,0,0,0.4),inset 0 2px 8px rgba(255,255,255,0.28),inset 0 0 70px rgba(139,115,85,0.07);position:relative;padding:0;border-radius:0!important;overflow:hidden}
#chatMessages .msg.first-letter .letter-compose-paper::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,rgba(180,160,120,0.18) 0px,rgba(180,160,120,0.18) 1px,transparent 1px,transparent 29px)!important;pointer-events:none;top:0}
#chatMessages .msg.first-letter .letter-compose-body{padding:8px 32px 22px 32px;min-height:96px;box-sizing:border-box}
#chatMessages .msg.first-letter .letter-compose-body p{margin:0;font-size:16px;line-height:28px;color:#2c2416;font-family:'Lucida Handwriting','Brush Script MT','Segoe Script',cursive;white-space:pre-wrap;word-break:break-word}
/* Vereinfachte, sehr schlichte Nachrichten (ohne Box) */
#chatMessages .msg:not(.first-letter){background:#132031;border:1px solid #1e2b38;border-radius:14px;padding:10px 14px;box-shadow:0 3px 10px rgba(0,0,0,0.4);font-family:Inter,system-ui,sans-serif;color:#d8e6f0;max-width:72%;position:relative;line-height:1.45}
#chatMessages .msg:not(.first-letter)::before{display:none}
#chatMessages .msg.from-me:not(.first-letter){align-self:flex-end;background:linear-gradient(135deg,#1c3b55,#173343);border-color:#2e5d78;color:#cfeaff}
#chatMessages .msg.from-them:not(.first-letter){background:#182633;color:#d8e6f0}
#chatMessages .msg:not(.first-letter) img{max-width:100%;border-radius:6px;margin-top:8px;border:1px solid #2b4254}
@media (max-width:680px){#chatMessages .msg:not(.first-letter){max-width:88%}}
@media (max-width:680px){
  #chatMessages .msg.first-letter .letter-compose-body{padding:24px 24px 20px 24px}
  #chatMessages .msg.first-letter .reactions{margin:0 24px 12px 24px}
}
.filter-section{margin-bottom:10px}
.filter-label{font-size:10px;font-weight:700;color:#6d5a43;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;font-family:Inter,system-ui,sans-serif;opacity:0.8}
.filter-value{font-size:13px;font-weight:700;color:#2c2416;margin-bottom:5px;font-family:Inter,system-ui,sans-serif}
.filter-sliders{display:flex;gap:8px}
.filter-sliders input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:4px;background:#c4b590;outline:none;border-radius:0!important}
.filter-sliders input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;background:#8b7355;border:1px solid #5a4730;cursor:pointer;border-radius:0!important}
.filter-sliders input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#8b7355;border:1px solid #5a4730;cursor:pointer;border-radius:0!important}
.filter-row{display:flex;gap:16px;margin-bottom:10px;align-items:center}
.filter-section-inline{display:flex;align-items:center;gap:8px}
.filter-btn{background:rgba(255,255,255,0.3);border:1px solid #c4b590;color:#2c2416;padding:6px 12px;font-size:18px;cursor:pointer;transition:.2s;font-weight:700;min-width:44px;text-align:center;border-radius:0!important}
.filter-btn:hover{background:rgba(255,255,255,0.5);transform:translateY(-1px)}
.filter-btn.active{background:#8b7355;color:#f9f5e8;border-color:#5a4730;box-shadow:inset 0 1px 3px rgba(0,0,0,0.3)}
.filter-scope-btns{display:flex;gap:6px}
.letter-send-btn{width:100%;background:#8b7355;border:2px solid #6d5a43;color:#f9f5e8;padding:12px;font-size:16px;font-weight:900;cursor:pointer;transition:.2s;margin-top:8px;font-family:'Lucida Handwriting','Brush Script MT','Segoe Script',cursive;letter-spacing:0.5px;border-radius:0!important}
.letter-send-btn:hover{background:#6d5a43;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.3)}
.letter-send-btn:active{transform:translateY(0)}

/* Incoming Letter Modal - Focused on message content */
.letter-incoming-modal .modalCard{background:transparent!important;border:none!important;padding:0!important;border-radius:0!important;max-width:600px!important;width:min(92vw,600px)!important}
.letter-incoming-paper{background:linear-gradient(135deg,#f9f5e8 0%,#ede4cc 100%);border:3px solid #8b7355;box-shadow:0 10px 35px rgba(0,0,0,0.5),inset 0 2px 10px rgba(255,255,255,0.3);position:relative;padding:0;border-radius:0!important}
.letter-incoming-paper::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(180,160,120,0.05) 2px,rgba(180,160,120,0.05) 4px);pointer-events:none}
.letter-incoming-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:2px solid #d4c5a0;background:rgba(212,197,160,0.15)}
.letter-incoming-title{font-family:'Lucida Handwriting','Brush Script MT','Segoe Script',cursive;font-size:22px;font-weight:900;color:#5a4730;letter-spacing:0.5px}
.letter-incoming-close{font-size:28px;cursor:pointer;color:#8b7355;transition:.2s;line-height:1;padding:0 4px}
.letter-incoming-close:hover{color:#5a4730;transform:scale(1.1)}
.letter-incoming-sender{padding:16px 24px;background:rgba(212,197,160,0.12);border-bottom:1px dashed #d4c5a0}
.letter-incoming-body{padding:28px 32px;min-height:180px;position:relative;z-index:1}
.letter-incoming-body img{max-width:100%;border-radius:0!important;margin-top:16px;box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.letter-incoming-actions{padding:20px 24px;background:rgba(212,197,160,0.2);border-top:2px dashed #c4b590;display:flex;gap:12px}
.letter-action-btn{flex:1;border:3px solid;padding:14px;font-size:16px;font-weight:900;cursor:pointer;transition:.2s;font-family:'Lucida Handwriting','Brush Script MT','Segoe Script',cursive;border-radius:0!important}
.letter-action-btn.accept{background:#7db87d;border-color:#5a9a5a;color:#f9f5e8}

/* AI_TAG: FRONTEND_COMPONENT | Country Block Settings UI Styles */
.countryBlockSection{display:flex;gap:16px;flex-wrap:nowrap}
@media (max-width:768px){.countryBlockSection{flex-direction:column}}
.countryListBox{flex:1;min-width:0}
.countrySelectedBox{width:240px;flex-shrink:0}
@media (max-width:768px){.countrySelectedBox{width:100%}}
.countryRow{display:flex;align-items:center;gap:4px;padding:3px 4px;margin:1px 0;border-radius:3px;background:#0e151e;border:1px solid #1a2430;transition:all .15s;cursor:pointer}
.countryRow:hover{background:#132431;border-color:#2a3a4f;transform:translateX(1px)}
.countryRow input[type=checkbox]{width:7px;height:7px;cursor:pointer;margin:0;flex-shrink:0;accent-color:var(--brand)}
.countryFlag{font-size:0.6em;flex-shrink:0;line-height:1}
.countryName{flex:1;font-weight:600;font-size:0.6rem;color:var(--ink)}
.blockedCountriesList{max-height:120px;overflow-y:auto;padding:2px;border:1px solid #1a2430;border-radius:4px;background:#0b1016}
.blockedCountriesSelected{background:#0e151e;border:1px solid #1a2430;border-radius:12px;padding:12px;min-height:120px;max-height:400px;overflow-y:auto}
.selectedCountryItem{display:flex;align-items:center;gap:8px;padding:6px 8px;margin:4px 0;background:#132031;border-radius:8px;border:1px solid #1e2b38}
.selectedCountryItem .flag{font-size:1.3em}
.selectedCountryItem .name{flex:1;font-size:0.9rem;font-weight:600}
.selectedCountryItem .removeBtn{background:rgba(255,89,104,0.15);color:var(--danger);border:1px solid rgba(255,89,104,0.3);padding:4px 8px;border-radius:6px;cursor:pointer;font-size:0.75rem;font-weight:700;transition:.15s}
.selectedCountryItem .removeBtn:hover{background:rgba(255,89,104,0.25);transform:scale(1.05)}
.countrySearchBox{position:relative;margin-bottom:12px}
.countrySearchBox input{background:#0e151e;border:1px solid #243141;color:var(--ink)}
.countrySearchBox input:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(77,163,255,0.1)}
.emptyState{text-align:center;padding:24px;opacity:0.6;font-size:0.9rem}
.blockedCountHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.blockedCountBadge{background:rgba(77,163,255,0.15);color:var(--brand);padding:4px 10px;border-radius:12px;font-size:0.85rem;font-weight:700}
.letter-action-btn.accept:hover{background:#5a9a5a;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.3)}
.letter-action-btn.reject{background:#c47676;border-color:#a85656;color:#f9f5e8}
.letter-action-btn.reject:hover{background:#a85656;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.3)}

/* Pigeon fly up animation when modal opens */
#pWrap.pigeon-fly-up{animation:pigeonFlyUp 1.2s ease-out forwards}
@keyframes pigeonFlyUp{0%{transform:translate(-50%,-50%) rotate(-2deg);opacity:1}100%{transform:translate(-50%,-120%) rotate(-5deg) scale(0.7);opacity:0}}
#pWrap.pigeon-return{animation:pigeonReturn 1.2s ease-out forwards}
@keyframes pigeonReturn{0%{transform:translate(-50%,-120%) rotate(-5deg) scale(0.7);opacity:0}100%{transform:translate(-50%,-50%) rotate(-2deg);opacity:1}}
/* Envelope under pigeon: floats in sync, slight swing, renders under bird */
#pWrap{display:flex;flex-direction:column;align-items:center;gap:0}
.pigeon-envelope{position:relative;width:132px;aspect-ratio:1.58/1;display:flex;align-items:center;justify-content:center;transform-origin:top center;pointer-events:none;margin:-35px auto 0;z-index:1;transform:translateX(3px) translateY(-1.55px) rotate(-2deg);}
.foot-main-left{transform-origin:bottom center}
.foot-main-right{transform-origin:bottom center}
#myPigeon{position:relative;z-index:2}
.envelope-svg{width:100%;height:100%}
.envelope-svg .paper-fill{fill:url(#envPaper)}
.envelope-svg .paper-outline{fill:none;stroke:#1a2430;stroke-width:4.2;stroke-linejoin:round}
.envelope-svg .outline{fill:none;stroke:#1a2430;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.envelope-svg .heart{fill:#e3383f;stroke:#1a2430;stroke-width:6.3;stroke-linejoin:miter}
.pigeon-envelope::after{content:"";position:absolute;inset:auto 24% -16px 24%;height:14px;background:radial-gradient(ellipse at center,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 70%);transform:translateY(50%);filter:blur(6px);opacity:.55}
/* Mobile lift: keep envelope snug under toes on narrow screens.
   Strategy (chosen from debug v11): width-proportional margin-top adjustment with slight safe-area compensation.
   Keeps visual contact across iOS/Android URL-bar changes without jank. */
@media (max-width:720px){
  .pigeon-envelope{
    width:96px;
    /* keep consistent vertical alignment on mobile */
    margin-top: -35px;
  }
}
@supports (margin-top: env(safe-area-inset-top)){
  @media (max-width:720px){
    .pigeon-envelope{ margin-top: calc(-35px + (env(safe-area-inset-top, 0px) * -0.10)); }
  }
}
/* Permanent: no envelope/feet swinging; keep wings only */
.back-toes-group{transform-origin:67px 106.5px; animation: feetSwing 3.2s ease-in-out infinite;}
#myPigeon .front-toes{transform-origin:67px 106.5px}
.envelope-swing{transform-origin:calc(50% - 12px) 0%}
.envelope-bob{transform:none}

/* Ground letter slots and drop animation */
/* Two stacked rows (bottom fills first). Centered, tighter gaps (was 18px/34px) */
.letterSlots{position:absolute;bottom:66px;left:50%;transform:translateX(-50%);width:min(760px,70vw);z-index:100;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
/* Tight stacking: remove horizontal gap and overlap subsequent slots */
.letterRow{display:flex;justify-content:center;gap:0}
#letterRowBottom .letterSlot:not(:first-child),
#letterRowTop .letterSlot:not(:first-child){margin-left:-30px}
.letterRow .letterSlot{position:relative;width:78px;height:50px;display:grid;place-items:end}
/* Individual positioning for each letter to create a natural nest look */
#letterRowBottom .letterSlot:nth-child(1) .groundLetter{transform:rotate(-8deg) translateY(-2px)}
#letterRowBottom .letterSlot:nth-child(2) .groundLetter{transform:rotate(-3deg) translateY(1px)}
#letterRowBottom .letterSlot:nth-child(3) .groundLetter{transform:rotate(2deg) translateY(-1px)}
#letterRowBottom .letterSlot:nth-child(4) .groundLetter{transform:rotate(5deg) translateY(2px)}
#letterRowBottom .letterSlot:nth-child(5) .groundLetter{transform:rotate(-6deg) translateY(0px)}
.groundLetter{pointer-events:auto;width:78px;height:50px;display:grid;place-items:center;cursor:pointer;transform-origin:50% 100%;animation:letterDrop .7s ease-out both;transition:transform .3s ease}
.groundLetter .envelope-svg{width:100%;height:100%;filter:drop-shadow(0 5px 12px rgba(0,0,0,0.35))}
.groundLetter:hover{transform:translateY(-8px) scale(1.05)!important}
@keyframes letterDrop{0%{opacity:0;transform:translateY(-80px) scale(0.96)}70%{opacity:1;transform:translateY(4px) scale(1.02)}100%{opacity:1}}
.letterLift{animation:letterLift .8s ease forwards}
@keyframes letterLift{to{transform:translateY(-160px) scale(0.85);opacity:0}}
.letterVanish{animation:letterVanish .5s ease forwards}
@keyframes letterVanish{to{transform:scale(0.9);opacity:0}}

/* Global drop bird that flies from the very top of the screen */
.dropBirdGlobal{position:fixed;top:-160px;left:0;width:54px;height:54px;background:var(--pigeon-svg) no-repeat center/contain;opacity:0;z-index:150;filter:drop-shadow(2px 2px 4px rgba(0,0,0,0.3));transition:top 1s cubic-bezier(.6,.1,.3,1), left 1s cubic-bezier(.6,.1,.3,1), opacity .6s ease}
@media (max-width:900px){
  .letterSlots{width:90vw;gap:10px}
  .letterRow .letterSlot,.groundLetter{width:70px;height:46px}
  #letterRowBottom .letterSlot:not(:first-child),
  #letterRowTop .letterSlot:not(:first-child){margin-left:-24px}
}
@media (max-width:640px){
  .letterSlots{gap:8px}
  .letterRow .letterSlot,.groundLetter{width:60px;height:40px}
  #letterRowBottom .letterSlot:not(:first-child),
  #letterRowTop .letterSlot:not(:first-child){margin-left:-18px}
}
.letterVanish{animation:letterVanish .5s ease forwards}

/* Background flying pigeon */
.backgroundPigeon{position:absolute;width:60px;height:70px;pointer-events:none;opacity:0;z-index:3;filter:drop-shadow(3px 4px 6px rgba(0,0,0,0.3));transform-origin:center center;overflow:visible}
.backgroundPigeon.flying{animation:backgroundFlight 13s linear}
.backgroundPigeon svg{width:100%;height:100%;overflow:visible}
.backgroundPigeon .wing-left{transform-origin:68px 60px;animation:bgWingFlapLeft 0.5s ease-in-out infinite}
.backgroundPigeon .wing-right{transform-origin:76px 66px;animation:bgWingFlapRight 0.5s ease-in-out infinite}
/* Permanent: no envelope swing for background pigeon */
.backgroundPigeon .envelope{transform-origin:center center;animation:none}
@keyframes bgWingFlapLeft{0%,100%{transform:rotate(0)}50%{transform:rotate(-25deg)}}
@keyframes bgWingFlapRight{0%,100%{transform:rotate(0)}50%{transform:rotate(15deg)}}
/* removed backgroundEnvelopeSwing keyframes */
@keyframes backgroundFlight{
  /* Höher fliegender Vogel im Hintergrund */
  0%{opacity:0;transform:translateX(-140px) translateY(-80px) scale(0.65)}
  5%{opacity:0.9}
  50%{opacity:0.9;transform:translateX(calc(50vw - 30px)) translateY(-74px) scale(0.65)}
  95%{opacity:0.9}
  99.6%{opacity:0.9}
  100%{opacity:0;transform:translateX(calc(100vw + 140px)) translateY(-68px) scale(0.65)}
}
  /* Dynamic base: ~40vw responsive width; JS will refine height & bottom overlap */
  #nestWrap{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;z-index:98;animation:nestEnter 1.1s ease;width:40vw;max-width:940px;min-width:300px;aspect-ratio:940/404;bottom:-110px}
        @media (prefers-reduced-motion:reduce){#nestWrap{animation:none}}
        .nest-svg{width:100%;height:100%;overflow:visible}
  .nest-svg line{stroke:#7b5a32;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
        .nest-svg line.t1{stroke:#4f351c}
        .nest-svg line.t2{stroke:#6a4724}
        .nest-svg line.t3{stroke:#8b6235}
        .nest-svg line.t4{stroke:#a97648}
        .nest-svg line.t5{stroke:#c69255}
  .nest-svg line.fg{filter:brightness(1.05);stroke-width:2.5}
  .nest-svg line.bgdim{opacity:.48}
  /* Restored simple base: only optional front highlight lines kept */
  .nest-svg line.hl{stroke:#d8b078;stroke-width:2.7;opacity:.75}
  .nest-svg line.dim{opacity:.55}
        @keyframes nestEnter{0%{opacity:0;transform:translateX(-50%) scale(.9) rotate(-4deg)}55%{opacity:1}100%{opacity:1;transform:translateX(-50%) scale(1) rotate(0)}}
/* Consolidated style block: removed duplicate declarations for .emojiPicker/.emojiBtn/.actionMenu already defined earlier.
  Keep unique utility & component classes below. */
.msgActions{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.msgBtn{background:rgba(77,163,255,0.1);border:1px solid rgba(77,163,255,0.3);color:#4da3ff;padding:4px 8px;border-radius:6px;font-size:0.75rem;cursor:pointer;transition:.2s;user-select:none}
.msgBtn:hover{background:rgba(77,163,255,0.2);transform:scale(1.05)}
.msgBtn.danger{background:rgba(255,89,104,0.1);border-color:rgba(255,89,104,0.3);color:#ff5968}
.msgBtn.danger:hover{background:rgba(255,89,104,0.2)}
.reactions{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.reaction{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);padding:3px 8px;border-radius:12px;font-size:0.9rem;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:4px;user-select:none}
.reaction:hover{background:rgba(255,255,255,0.1);transform:scale(1.08)}
.reaction.mine{background:rgba(77,163,255,0.15);border-color:rgba(77,163,255,0.4)}
.reactionCount{font-size:0.75rem;opacity:0.8}
.blockedUserItem{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#132031;border:1px solid #1a2430;margin-bottom:10px}
.blockedUserItem .chatAva{width:42px;height:42px}
.unblockBtn{background:rgba(255,89,104,0.1);border:1px solid #ff5968;color:#ff5968;padding:6px 12px;border-radius:8px;font-size:0.85rem;cursor:pointer;transition:.2s;user-select:none}
.unblockBtn:hover{background:rgba(255,89,104,0.2);transform:scale(1.05)}

/* Respect reduced motion preferences: disable non-essential animations/transitions */
@media (prefers-reduced-motion: reduce){
  /* Generic: turn off transitions/animations for common components */
  *, *::before, *::after{ transition: none !important; animation-delay: 0s !important; animation-duration: 0.001s !important; }
  
  /* Explicitly disable key animated elements to cut render-thread work */
  .sun, .moon, .cloud, .grass::before,
  #pWrap, #myPigeon .wing-left, #myPigeon .wing-right,
  .back-toes-group, #myPigeon .front-toes, .envelope-swing,
  .backgroundPigeon, .backgroundPigeon.flying,
  .sidePigeon, .sidePigeon.landing, .sidePigeon.sitting,
  .dropBirdGlobal, .leaf, .feather, .ripple,
  .achievement, .paperAirplane,
  .groundLetter, .letterLift, .letterVanish,
  .pondWater, .pondGain, .paperGain,
  .shake, .bounce, .pulse, .wiggle, .pop, .wave, .flip,
  .star {
    animation: none !important;
  }

  /* Parallax/transform tweaks: keep static, but preserve sun/moon centering translate */
  .sky, #hillR, #pWrap, .backgroundPigeon { transform: none !important; }
  /* Keep translate(-50%,-50%) on sun/moon for correct positioning while disabling animations elsewhere */

  /* Clouds stop drifting */
  .cloud{ animation: none !important; opacity: 0.6; }

  /* Envelope/nest swing stays still */
  .envelope-swing{ transform: none !important; }

  /* Prefer calmer chat scroll behavior on some browsers */
  #chatMessages{ scroll-behavior: auto; }
}

/* AI_TAG: FRONTEND_COMPONENT | Long-press reaction picker inline bar */
.reactionPicker{
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%) translateY(-4px);
  background:var(--card);
  border:1px solid #1a2430;
  border-radius:14px;
  padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  z-index:150;
  animation:reactionPickerSlide .2s ease;
}
@keyframes reactionPickerSlide{
  0%{opacity:0;transform:translateX(-50%) translateY(4px)}
  100%{opacity:1;transform:translateX(-50%) translateY(-4px)}
}
.quickReactions{
  display:flex;
  gap:6px;
  align-items:center;
}
.quickReactionBtn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  font-size:22px;
  cursor:pointer;
  border-radius:10px;
  transition:.15s;
  background:rgba(77,163,255,0.05);
  border:1px solid transparent;
}
.quickReactionBtn:hover{
  background:rgba(77,163,255,0.15);
  border-color:rgba(77,163,255,0.3);
  transform:scale(1.1);
}
.plusBtn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  font-size:20px;
  font-weight:700;
  cursor:pointer;
  border-radius:10px;
  transition:.15s;
  background:rgba(77,163,255,0.1);
  border:1px solid rgba(77,163,255,0.3);
  color:var(--brand);
}
.plusBtn:hover{
  background:rgba(77,163,255,0.2);
  transform:scale(1.08);
}

/* AI_TAG: FRONTEND_COMPONENT | Extended emoji picker modal */
.emojiPickerModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:200;
  backdrop-filter:blur(4px);
}
.emojiPickerModal.show{
  display:flex;
}
.emojiPickerBox{
  width:min(92vw,420px);
  max-height:70vh;
  background:var(--card);
  border:1px solid #1a2430;
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
  animation:emojiModalSlide .25s ease;
}
@keyframes emojiModalSlide{
  0%{opacity:0;transform:scale(0.9)}
  100%{opacity:1;transform:scale(1)}
}
.emojiPickerHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid #1a2430;
}
.emojiPickerTitle{
  font-weight:900;
  font-size:16px;
}
.emojiPickerCloseBtn{
  font-size:24px;
  cursor:pointer;
  color:var(--muted);
  transition:.2s;
  line-height:1;
}
.emojiPickerCloseBtn:hover{
  color:var(--ink);
  transform:scale(1.1);
}
.emojiGrid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
  padding:16px;
  overflow-y:auto;
  max-height:50vh;
}
.emojiGridBtn{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  font-size:28px;
  cursor:pointer;
  border-radius:10px;
  transition:.15s;
  background:rgba(77,163,255,0.03);
}
.emojiGridBtn:hover{
  background:rgba(77,163,255,0.15);
  transform:scale(1.12);
}

/* AI_TAG: FRONTEND_GRAPHICS | Custom SVG resource icon styling */
.chip-icon {
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  transition: transform 0.2s ease;
  transform: scale(var(--chip-icon-scale, 1));
  transform-origin: center;
  transform-box: fill-box; /* ensure SVG scaling uses its bbox */
}
.chip:hover .chip-icon {
  transform: scale(calc(var(--chip-icon-scale, 1) * 1.08));
}
/* Feather animation particle - uses CSS shape */
.feather {
  position: absolute;
  width: 20px;
  height: 40px;
  background: linear-gradient(45deg, #fff 0%, #ddd 50%, #fff 100%);
  border-radius: 50% 50% 50% 0;
  pointer-events: none;
  opacity: 0;
  animation: featherFloat 2.5s ease-out forwards;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* Shared feather visual to unify phone vs tablet */
.feather-shape {
  background: linear-gradient(45deg, #fff 0%, #ddd 50%, #fff 100%);
  border-radius: 50% 50% 50% 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* Animated feather icon for HUD - includes the feather shape */
.feather-icon-animated {
  width: 12px;
  height: 24px;
  display: inline-block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  background: linear-gradient(45deg, #fff 0%, #ddd 50%, #fff 100%);
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(45deg, #ffffff 0%, #d9d9d9 50%, #ffffff 100%);
  border-radius: 60% 60% 60% 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-22deg);
}

/* When enlarged by override (tablet/desktop HUD), maintain aspect ratio */
.hud-dock .feather-icon-animated {
  width: 18px;
  height: 36px;
}

/* SVG-based feather icon variant for HUD to match exact shape */
.feather-icon-svg {
  display: inline-block;
  width: 12px;
  height: 24px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.hud-dock .feather-icon-svg {
  width: 18px;
  height: 36px;
}

/* Simple CSS feather for HUD - matches animated feather shape */
.feather-icon-hud {
  display: inline-block;
  width: 14px;
  height: 28px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ffffff 0%, #d0d0d0 50%, #ffffff 100%);
  border-radius: 50% 50% 50% 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  transform: rotate(-25deg);
  opacity: 1;
}

.hud-dock .feather-icon-hud {
  width: 18px;
  height: 36px;
}

@keyframes featherFloat {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(120px) rotate(180deg) translateX(var(--drift, 20px));
  }
}
@keyframes featherFloatLoop {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-3px) rotate(5deg);
  }
}

/* --- Day/Night: visual polish overrides and new layers --- */
/* AI_TAG: FRONTEND_RENDER | Day/night auxiliary layers (sun/moon base styles defined earlier) */

/* Short-lived accent phases */
.sky.sunrise{ transition: background 0.8s ease; }
.sky.sunset{ transition: background 0.8s ease; }

/* AI_TAG: FRONTEND_GRAPHICS | Haze and ray overlay layers */
.hazeLayer{ 
  position:absolute; inset:0; pointer-events:none; z-index:2; opacity:0; display:none !important;
}
.rayLayer{ 
  position:absolute; inset:0; pointer-events:none; z-index:1; opacity:0; display:none !important;
}

/* Constrain any blend effects to the hub stage to prevent page-wide artifacts */
#page-hub .stage{ isolation: isolate; }

/* Simple city window layer near horizon for night ambiance */
.windowLayer{ position:absolute; left:0; right:0; bottom:58px; height:120px; pointer-events:none; z-index:3; display:block }
.win{ position:absolute; width:8px; height:10px; border-radius:2px; background:#0f141b; opacity:.85; box-shadow:0 0 0 rgba(0,0,0,0); transition: background .6s ease, box-shadow .6s ease, opacity .6s ease }
.win.lit{ background:#ffd98a; box-shadow:0 0 8px rgba(255,217,138,0.6), 0 0 18px rgba(255,180,90,0.25); opacity:1 }
@keyframes windowFlicker{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(0.95) } }
.win.flicker{ animation:windowFlicker 2.8s ease-in-out infinite }

/* Cloud tint smoothing for time-of-day adjustments */
.cloud{ transition: background 1s ease, opacity .6s ease, filter .8s ease; }