/* Ferma v5 — HUD, tool palette, Bodīte shop, modals, toasts. Classic 2010 Flash look: wood planks, dark outlines, white italic text. */
:root{--wood1:#E8B26E;--wood2:#C88A4A;--wood3:#9C6230;--woodline:#5A3412;--ink:#3a1d00;--cyan:#8FF3FF;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
[hidden]{display:none!important}   /* .sq/.tool set display:flex, which would otherwise beat the hidden attribute */
/* sprites keep their own proportions whatever set is loaded (classic or art/modern); portraits fill their frame */
#hud img,#modal img,#flyers img,#cursor{object-fit:contain}
#friendsbar img,#hostplate img,.row .av img{object-fit:cover;object-position:50% 22%}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10;font-family:"Trebuchet MS",Verdana,Arial,sans-serif}
#hud>*{pointer-events:auto}
#hud[hidden]{display:none}
button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stroke,#topbar .inset span,.sq span,.gohome span,.toast,.panel h2,.card .nm,.lv-card h2,.lv-card .big{color:#fff;font-style:italic;font-weight:bold;
  text-shadow:-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink),1px 1px 0 var(--ink),0 2px 0 var(--ink)}
img[data-sprite]{-webkit-user-drag:none;user-select:none}

/* ---- top-left: rosette, XP plank, coins, crystals ---- */
#topbar{position:absolute;left:calc(8px + var(--sal));top:calc(6px + var(--sat));display:flex;align-items:center;gap:10px;transform-origin:0 0}
.rosette{position:relative;width:66px;height:72px;margin-right:-26px;z-index:2;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}
.rosette img{width:100%;height:100%;object-fit:contain}
.rosette b{position:absolute;left:0;right:0;top:15px;text-align:center;font:bold italic 23px "Trebuchet MS",sans-serif;color:#FFE14A;
  text-shadow:-2px -2px 0 #1b2f6b,2px -2px 0 #1b2f6b,-2px 2px 0 #1b2f6b,2px 2px 0 #1b2f6b,0 3px 0 #1b2f6b}
.plank{position:relative;display:flex;align-items:center;height:38px;padding:0 8px 0 10px;border-radius:9px;box-sizing:border-box;
  background:linear-gradient(var(--wood1),var(--wood2) 55%,var(--wood3));border:2px solid var(--woodline);box-shadow:0 3px 0 rgba(70,35,5,.55),inset 0 2px 0 rgba(255,255,255,.35)}
.plank .inset{min-width:84px;height:24px;border-radius:6px;padding:0 9px;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;
  background:linear-gradient(#2a1607,#4a2c12);box-shadow:inset 0 2px 3px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.3)}
.plank .inset span{font-size:16px;letter-spacing:.3px}
.plank.xp{padding-left:30px}
.plank.xp .inset{min-width:92px}
.xpbar{position:absolute;left:30px;right:8px;bottom:3px;height:4px;border-radius:2px;background:rgba(40,20,5,.6)}
.xpbar i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,#9BEA4C,#FFE14A);transition:width .4s}
.plank .ic{width:44px;height:44px;margin:-6px 4px -6px -24px;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.plank.money,.plank.crys{margin-left:14px}
.inset.green{background:linear-gradient(#2F8F1C,#56B92E)!important}
.inset.purple{background:linear-gradient(#5E2A92,#9A5BD6)!important}
.bump{animation:bump .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---- top-right square buttons ---- */
#topright{position:absolute;right:calc(8px + var(--sar));top:calc(6px + var(--sat));display:flex;gap:7px;align-items:flex-start}
.sq{position:relative;width:62px;height:62px;padding:0;border-radius:11px;border:3px solid #9C6230;
  background:radial-gradient(circle at 50% 40%,#FFF4DE,#F6D9A8 60%,#E8B97A);box-shadow:0 3px 0 #6b3d14,inset 0 0 0 2px rgba(255,255,255,.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .1s}
.sq img{width:40px;height:40px;object-fit:contain;margin-top:-6px}
.sq span{position:absolute;bottom:-3px;left:-6px;right:-6px;font-size:11.5px;text-align:center;white-space:nowrap}
.sq:hover{transform:translateY(-2px);filter:brightness(1.05)}
.sq:active{transform:translateY(2px)}
.sq em{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;border-radius:10px;background:#E8401C;border:2px solid #fff;color:#fff;font:bold 12px sans-serif;line-height:20px;font-style:normal;text-align:center;padding:0 3px;box-sizing:border-box}
.gohome{display:flex;align-items:center;gap:8px;height:44px;padding:0 10px 0 6px;border-radius:12px;border:3px solid #6b3d14;
  background:linear-gradient(#FFB54A,#F08A1C 55%,#C4600A);box-shadow:0 3px 0 #6b3d14,inset 0 2px 0 rgba(255,255,255,.45)}
.gohome img{width:34px;height:34px;object-fit:contain}
.gohome span{font-size:17px}
.gohome i{font-style:normal;color:#fff;font-size:15px;text-shadow:0 1px 0 #6b3d14;background:#9a4a00;border-radius:4px;padding:2px 5px}
.gohome[hidden]{display:none}

/* ---- host name plate while visiting ---- */
#hostplate{position:absolute;left:50%;top:calc(8px + var(--sat));transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:5px 16px 5px 6px;
  border-radius:12px;background:linear-gradient(#5b3a1d,#3d2410);border:3px solid #E8B26E;box-shadow:0 4px 0 rgba(0,0,0,.35);color:#fff}
#hostplate[hidden]{display:none}
#hostplate img{width:44px;height:44px;border-radius:8px}
#hostplate b{display:block;font:bold italic 17px "Trebuchet MS",sans-serif}
#hostplate small{display:block;font:italic 13px "Trebuchet MS",sans-serif;color:#FFE6B0}
#hostplate span{font:bold italic 15px sans-serif;background:#2f63c7;border:2px solid #fff;border-radius:14px;padding:2px 9px}

/* ---- avatar + gift (left, like c1) ---- */
#avatar{position:absolute;left:calc(10px + var(--sal));top:calc(88px + var(--sat));display:flex;flex-direction:column;align-items:center;gap:2px;width:72px}
#avatar .av{width:58px;height:58px;border-radius:12px;border:3px solid #fff;box-shadow:0 0 0 2px #6b3d14,0 3px 6px rgba(0,0,0,.3);overflow:hidden;background:#F6E7C8}
#avatar svg{width:100%;height:100%;display:block}
#avatar span{font:bold italic 12px "Trebuchet MS",sans-serif;color:#fff;text-shadow:0 1px 0 #3a1d00,0 0 3px #3a1d00;text-align:center;white-space:nowrap;max-width:min(260px,40vw);overflow:hidden;text-overflow:ellipsis}
#avatar span:has(+ small:not([hidden])){align-self:flex-start}
#avatar small{font:bold 11px "Trebuchet MS",sans-serif;color:#FFF3C4;text-shadow:0 1px 0 #3a1d00,0 0 3px #3a1d00;text-align:left;white-space:nowrap;margin-top:-1px;
  align-self:flex-start;max-width:min(260px,40vw);overflow:hidden;text-overflow:ellipsis}   /* wider than the 72px column: grows right, never off-screen */
#avatar small[hidden]{display:none}
.sq svg.mapic{width:42px;height:42px;margin-top:-6px}
#gift{position:absolute;left:calc(14px + var(--sal));top:calc(48% - 30px);width:60px;height:60px;border:0;background:none;padding:0;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}
#gift img{width:100%;height:100%;object-fit:contain}
#gift.ready{animation:giftHop 1.6s ease-in-out infinite}
#gift.ready::after{content:"!";position:absolute;right:-4px;top:-6px;width:22px;height:22px;border-radius:50%;background:#E8401C;border:2px solid #fff;color:#fff;font:bold 15px/20px sans-serif;text-align:center}
#gift:not(.ready){opacity:.55;filter:grayscale(.6)}
@keyframes giftHop{0%,60%,100%{transform:translateY(0) rotate(0)}70%{transform:translateY(-10px) rotate(-6deg)}80%{transform:translateY(0) rotate(4deg)}90%{transform:translateY(-4px)}}

/* ---- friends bar (bottom-left) ---- */
#friendsbar{position:absolute;left:calc(8px + var(--sal));bottom:calc(10px + var(--sab));display:flex;gap:6px;padding:6px 8px 4px;border-radius:12px;
  background:linear-gradient(rgba(120,70,25,.86),rgba(80,45,15,.9));border:2px solid #E8B26E;box-shadow:0 3px 0 rgba(0,0,0,.3)}
#friendsbar button{width:56px;padding:0;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:1px;color:#fff}
#friendsbar img{width:48px;height:48px;border-radius:9px;border:2px solid #FFE6B0;box-shadow:0 2px 0 rgba(0,0,0,.35);transition:transform .12s}
#friendsbar button:hover img{transform:translateY(-3px) scale(1.06)}
#friendsbar span{font:bold italic 11px sans-serif;text-shadow:0 1px 0 #000;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#friendsbar small{font:bold 10px sans-serif;color:#FFE14A;text-shadow:0 1px 0 #000;margin-top:-2px}
#friendsbar button{position:relative}
#friendsbar i.fav{position:absolute;right:-2px;top:-6px;font-style:normal;font-size:18px;line-height:1;color:#FFD21F;text-shadow:0 0 2px #6b3d14,0 1px 0 #6b3d14,1px 0 0 #6b3d14,-1px 0 0 #6b3d14}
.row .fav{color:#E8A400;font-style:normal;margin-left:4px}
.toast.act{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px}
.toast.act .btn{height:30px;font-size:14px;padding:0 12px}
#friendsbar button.cur img{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan),0 0 10px var(--cyan)}

/* ---- side column + palette (bottom-right, like c1) ---- */
#side{position:absolute;right:calc(14px + var(--sar));bottom:calc(98px + var(--sab));display:flex;gap:6px}
.rnd{width:40px;height:40px;border-radius:10px;padding:4px;border:2px solid rgba(255,255,255,.65);background:rgba(220,255,225,.42);box-shadow:0 2px 4px rgba(0,0,0,.18);backdrop-filter:blur(2px)}
.rnd img{width:100%;height:100%;object-fit:contain}
.rnd.txt{font:bold 22px/1 "Trebuchet MS",sans-serif;color:#24400f;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.rnd.off{position:relative}
.rnd.off::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:3px;background:#C0281A;transform:rotate(-40deg);border-radius:2px;box-shadow:0 0 0 1px #fff}
.rnd:hover{background:rgba(235,255,240,.65)}
#palette{position:absolute;right:calc(12px + var(--sar));bottom:calc(20px + var(--sab));display:flex;gap:7px}
.tool{position:relative;width:68px;height:68px;padding:5px;border-radius:12px;border:2px solid rgba(255,255,255,.7);
  background:linear-gradient(rgba(225,255,232,.55),rgba(190,240,205,.45));box-shadow:0 3px 6px rgba(0,0,0,.2);transition:transform .1s,box-shadow .15s}
.tool img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.tool:hover{transform:translateY(-2px)}
.tool.sel{border-color:#E9FDFF;background:linear-gradient(rgba(230,255,255,.75),rgba(170,240,255,.55));box-shadow:0 0 0 3px var(--cyan),0 0 16px 3px rgba(111,231,255,.9)}
.tool.off{opacity:.45;filter:grayscale(.8)}
.tool .badge{position:absolute;right:-6px;top:-8px;width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #6b3d14;box-shadow:0 2px 0 rgba(0,0,0,.25);overflow:hidden}
.tool .badge img{width:100%;height:100%;object-fit:cover;filter:none}
.tool kbd{position:absolute;left:4px;top:2px;font:bold 10px sans-serif;color:rgba(40,60,20,.55)}

/* ---- seed picker ---- */
#seedpick{position:absolute;right:calc(12px + var(--sar));bottom:calc(100px + var(--sab));display:flex;flex-wrap:wrap;gap:6px;max-width:min(560px,94vw);padding:8px;border-radius:12px;
  background:linear-gradient(#6a4220,#4a2c12);border:3px solid #E8B26E;box-shadow:0 5px 0 rgba(0,0,0,.35)}
#seedpick[hidden]{display:none}
.seed{width:62px;padding:3px 2px 4px;border-radius:9px;border:2px solid #9C6230;background:linear-gradient(#FFF6E2,#F2D9A8);display:flex;flex-direction:column;align-items:center;gap:1px;color:#4a2306}
.seed img{width:50px;height:38px;object-fit:contain}
.seed b{font:bold 10.5px sans-serif;white-space:nowrap}
.seed small{font:bold 10px sans-serif;color:#2F7D1C}
.seed.sel{border-color:#fff;box-shadow:0 0 0 3px var(--cyan),0 0 10px var(--cyan)}
.seed.lock{opacity:.55;filter:grayscale(.7)}
.seed.lock small{color:#8a2a10}

/* ---- toasts + flying coins ---- */
#toasts{position:absolute;left:50%;top:calc(70px + var(--sat));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;width:min(92vw,520px)}
/* the clamp sits on the inner .tx: a clamped box with padding shows the next line through its padding */
.toast{box-sizing:border-box;min-height:44px;max-width:100%;padding:11px 16px;line-height:1.3;border-radius:12px;background:linear-gradient(rgba(110,62,22,.95),rgba(76,42,14,.95));border:2px solid #E8B26E;box-shadow:0 4px 0 rgba(0,0,0,.3);font-size:15px;text-align:center;animation:toastIn .3s cubic-bezier(.3,1.6,.5,1)}
.toast.bad{background:linear-gradient(rgba(150,40,20,.95),rgba(100,24,10,.95))}
.toast.good{background:linear-gradient(rgba(50,120,25,.95),rgba(30,85,12,.95))}
.toast.out{opacity:0;transform:translateY(-8px);transition:all .35s}
.toast .tx{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.toast.open .tx{-webkit-line-clamp:unset;line-clamp:unset;display:block}
@keyframes toastIn{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
#flyers{position:absolute;inset:0;pointer-events:none!important;overflow:hidden}
#flyers img{position:absolute;width:30px;height:30px;left:0;top:0;will-change:transform;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}
#cursor{position:fixed;left:0;top:0;width:34px;height:34px;object-fit:contain;pointer-events:none;z-index:30;filter:drop-shadow(0 2px 1px rgba(0,0,0,.4));will-change:transform}
#cursor[hidden]{display:none}

/* ---- placement bar ---- */
#placebar{position:absolute;left:50%;bottom:calc(104px + var(--sab));transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:14px;background:rgba(60,35,12,.88);border:2px solid #E8B26E}
#placebar[hidden]{display:none}
#placebar button{width:46px;height:46px;border-radius:50%;border:3px solid #fff;font:bold 22px sans-serif;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.35)}
#pl-ok{background:#4CAF2A}#pl-flip{background:#3d7be0}#pl-no{background:#D23A1E}
#placebar span{color:#fff;font:bold italic 14px sans-serif;margin-left:4px;max-width:180px}

/* ---- modal + wooden panels ---- */
#modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(20,30,5,.45);animation:fadeIn .2s}
#modal[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}}
.panel{position:relative;width:min(780px,96vw);max-height:min(92vh,760px);display:flex;flex-direction:column;border-radius:16px;
  background:linear-gradient(#6E4521,#4F2F14);border:4px solid #2E1A08;box-shadow:0 0 0 3px #C98A47,0 12px 30px rgba(0,0,0,.5);animation:panelIn .32s cubic-bezier(.3,1.5,.5,1)}
@keyframes panelIn{0%{transform:scale(.7);opacity:0}100%{transform:none;opacity:1}}
.panel .x{position:absolute;right:-14px;top:-14px;width:40px;height:40px;border-radius:50%;border:3px solid #fff;background:radial-gradient(circle at 40% 35%,#ff7a55,#C42A12);color:#fff;font:bold 20px sans-serif;box-shadow:0 3px 0 rgba(0,0,0,.4);z-index:3}
.panel .head{position:relative;height:64px;border-radius:12px 12px 0 0;background:linear-gradient(#9E3A1E,#6E2410);border-bottom:3px solid #2E1A08;display:flex;align-items:center;justify-content:center}
.panel .head h2{margin:0;font-size:30px;letter-spacing:.5px}
.panel .head .stars{position:absolute;top:4px;left:0;right:0;display:flex;justify-content:center;gap:120px;pointer-events:none}
.panel .head .stars img{width:22px;height:22px}
.panel .head .stars img:nth-child(2){margin-top:-2px}
.panel .head .masc{position:absolute;bottom:-6px;width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.panel .head .masc.l{left:18px;transform:rotate(-8deg)}
.panel .head .masc.r{right:18px;transform:rotate(8deg)}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:9px 12px 6px}
.tabs button{height:28px;border-radius:5px;border:2px solid #7a4a1e;background:linear-gradient(#FFF8E8,#EEDDBA);font:bold 12.5px "Trebuchet MS",sans-serif;color:#3d2208;box-shadow:0 2px 0 #3d2208;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.tabs button.on{background:linear-gradient(#E7C78E,#C9A062);box-shadow:inset 0 2px 3px rgba(0,0,0,.35);transform:translateY(2px)}
.body{overflow:auto;padding:6px 14px 16px;-webkit-overflow-scrolling:touch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.card{position:relative;border-radius:8px;padding:6px 8px 8px;background:linear-gradient(#B98D5A,#9C7040);border:2px solid #3d2208;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);display:flex;flex-direction:column;align-items:center;gap:5px}
.card .pic{width:100%;height:96px;border-radius:5px;background:linear-gradient(#FFFCF2,#F3E6C9);border:2px solid #7a4a1e;display:flex;align-items:center;justify-content:center;flex-direction:column}
.card .pic img{max-width:84px;max-height:72px;object-fit:contain}
.card .nm{font-size:13px;color:#3d2208;text-shadow:none;font-style:normal;margin-top:-2px}
.card .pic .nm{font-size:12px}
.card .step{display:flex;align-items:center;gap:3px}
.card .step button{width:22px;height:22px;border-radius:4px;border:2px solid #5a3412;background:linear-gradient(#F7D9A0,#D9A35C);font:bold 13px sans-serif;color:#5a3412;padding:0;line-height:1}
.card .step input{width:44px;height:20px;border-radius:3px;border:2px solid #5a3412;text-align:center;font:bold 13px sans-serif;background:#fff;color:#3d2208}
.card .price{display:flex;align-items:center;justify-content:center;gap:4px;min-width:78%;height:24px;border-radius:5px;background:linear-gradient(#3E2410,#5E3A1A);border:2px solid #2E1A08;color:#FFE14A;font:bold 14px sans-serif;cursor:pointer}
.card .price img{width:20px;height:20px}
.card .price:hover{filter:brightness(1.25)}
.card .price.cant{color:#ff9b88}
.card.lock{filter:grayscale(.75);opacity:.75}
.card.lock .price{cursor:default}
.card .lvl{position:absolute;top:8px;right:10px;font:bold 11px sans-serif;background:#2f63c7;color:#fff;border-radius:9px;padding:1px 6px;border:1px solid #fff}
.card .sub{font:bold 11px sans-serif;color:#3d2208;opacity:.85;text-align:center;min-height:13px}
.soon{padding:50px 20px;text-align:center;color:#FFE6B0;font:bold italic 30px "Trebuchet MS",sans-serif;text-shadow:0 3px 0 #2E1A08}
.soon small{display:block;font-size:15px;margin-top:8px;font-style:normal;opacity:.85}

/* list rows (noliktava, friends, news) */
.rows{display:flex;flex-direction:column;gap:7px}
.row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;background:linear-gradient(#FFF6E2,#F0D9AB);border:2px solid #7a4a1e;color:#3d2208}
.row .ic{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#fff;border:2px solid #C49A62}
.row .ic img,.row .ic canvas{max-width:40px;max-height:40px}
.row .tx{flex:1;min-width:0}
.row .tx b{display:block;font-size:15px}
.row .tx small{display:block;font-size:12px;opacity:.8}
.btn{height:34px;padding:0 14px;border-radius:9px;border:2px solid #1F5A0C;background:linear-gradient(#9BEA4C,#4FAE24);color:#fff;font:bold italic 15px "Trebuchet MS",sans-serif;box-shadow:0 3px 0 #26620e;
  text-shadow:-1px -1px 0 #1d4f08,1px -1px 0 #1d4f08,-1px 1px 0 #1d4f08,1px 1px 0 #1d4f08;white-space:nowrap}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #26620e}
.btn.orange{border-color:#7a3a00;background:linear-gradient(#FFC15A,#E5800F);box-shadow:0 3px 0 #7a3a00;text-shadow:-1px -1px 0 #6b3000,1px -1px 0 #6b3000,-1px 1px 0 #6b3000,1px 1px 0 #6b3000}
.btn.grey{border-color:#555;background:linear-gradient(#ddd,#999);box-shadow:0 3px 0 #555;text-shadow:0 1px 0 #444}
.btn[disabled]{opacity:.5;cursor:default}
.panel.small{width:min(460px,94vw)}
.panel .foot{display:flex;justify-content:center;gap:10px;padding:0 14px 14px}
.empty{color:#FFE6B0;text-align:center;padding:30px;font:bold italic 18px sans-serif}

/* level-up card */
.lv-card{position:relative;width:min(400px,92vw);padding:66px 22px 20px;border-radius:18px;text-align:center;background:radial-gradient(circle at 50% 30%,#FFF6CC,#FFD45A 55%,#F2A21C);border:4px solid #7a3a00;box-shadow:0 0 0 4px #fff,0 14px 40px rgba(0,0,0,.5);animation:panelIn .45s cubic-bezier(.3,1.7,.5,1)}
.lv-card .ros{position:absolute;left:50%;top:-70px;width:118px;height:128px;transform:translateX(-50%);animation:rosIn .8s cubic-bezier(.3,1.6,.5,1) both}
.lv-card .ros img{width:100%;height:100%;object-fit:contain}
.lv-card .ros b{position:absolute;left:0;right:0;top:27px;font:bold italic 42px "Trebuchet MS",sans-serif;color:#FFE14A;text-shadow:-3px -3px 0 #1b2f6b,3px -3px 0 #1b2f6b,-3px 3px 0 #1b2f6b,3px 3px 0 #1b2f6b,0 4px 0 #1b2f6b}
@keyframes rosIn{0%{transform:translateX(-50%) scale(0) rotate(-40deg)}100%{transform:translateX(-50%) scale(1) rotate(0)}}
.lv-card h2{margin:6px 0 2px;font-size:30px}
.lv-card p{margin:6px 0;color:#5a2600;font:bold 15px "Trebuchet MS",sans-serif}
.lv-card ul{list-style:none;padding:0;margin:10px 0 14px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.lv-card li{padding:4px 10px;border-radius:12px;background:rgba(255,255,255,.75);border:2px solid #C4600A;font:bold 13px sans-serif;color:#5a2600}
.lv-card li.rw{background:#3E9A1B;color:#fff;border-color:#1F5A0C}
.lv-card li.un{display:inline-flex;align-items:center;gap:5px;padding-left:6px}
.lv-card li.un img{width:18px;height:18px;object-fit:contain}

/* confirm / info cards */
.note{padding:16px 18px;color:#FFF3D6;font:600 16px/1.45 "Trebuchet MS",sans-serif;text-align:center}
.note b{color:#FFE14A}

/* cloud wipe for visits */
#wipe{position:fixed;inset:0;z-index:35;pointer-events:none}
#wipe i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff 52%,rgba(255,255,255,.0) 70%);transition:transform .55s cubic-bezier(.6,0,.4,1)}
#wipe i:nth-child(1){left:-35vmax;top:-30vmax;transform:translate(-80vmax,-40vmax)}
#wipe i:nth-child(2){left:20vw;top:-36vmax;transform:translate(0,-80vmax)}
#wipe i:nth-child(3){right:-35vmax;top:-20vmax;transform:translate(80vmax,-20vmax)}
#wipe i:nth-child(4){left:-30vmax;bottom:-34vmax;transform:translate(-80vmax,40vmax)}
#wipe i:nth-child(5){left:24vw;bottom:-38vmax;transform:translate(0,80vmax)}
#wipe i:nth-child(6){right:-32vmax;bottom:-30vmax;transform:translate(80vmax,40vmax)}
#wipe.on i{transform:none}

/* ---- visit counter (R9 G-01) ---- */
#hostplate em{font:bold italic 13px "Trebuchet MS",sans-serif;background:#2f8fd8;border:2px solid #fff;border-radius:12px;padding:2px 9px;white-space:nowrap;color:#fff}
.sq.wait{cursor:progress;filter:brightness(.92)}
.sq.wait img,.sq.wait svg{animation:wob .5s ease-in-out infinite alternate}
@keyframes wob{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

/* ---- radio (R10 §6.1): a wooden badge bottom-left above the friends, the compact radio slides up from it ---- */
#radio-badge{position:absolute;left:calc(14px + var(--sal));bottom:calc(102px + var(--sab));width:56px;height:56px;padding:0;border:0;background:none;cursor:pointer;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.25));transition:transform .12s}
#radio-badge svg{display:block;width:100%;height:100%}
#radio-badge:hover{transform:translateY(-2px) rotate(-3deg)}
.lamp{position:absolute;width:10px;height:10px;border-radius:50%;background:#6b4a26;border:2px solid #fff;box-shadow:0 1px 0 rgba(0,0,0,.4);pointer-events:none}
#radio-badge .lamp{right:1px;top:13px}
#b-radio{position:relative;display:none}
#b-radio svg{display:block;width:100%;height:100%}
#b-radio .lamp{right:-4px;top:-4px;width:8px;height:8px}
#radio-badge.on .lamp,#b-radio.on .lamp{background:#5BE23A;box-shadow:0 0 6px 2px rgba(110,255,80,.8)}
#radio-badge.blink .lamp,#b-radio.blink .lamp{animation:lampBlink .7s ease-in-out 3}
@keyframes lampBlink{50%{background:#FFB020;box-shadow:0 0 8px 3px rgba(255,180,40,.9)}}
#radiopanel{position:absolute;left:calc(10px + var(--sal));bottom:calc(166px + var(--sab));z-index:5;padding:8px;border-radius:16px;background:rgba(60,34,12,.6);
  box-shadow:0 8px 24px rgba(0,0,0,.35);animation:radioUp .28s cubic-bezier(.3,1.4,.5,1) both}
#radiopanel .grip{display:none}
@keyframes radioUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}

/* ---- Spēles overlay: lane C's kit draws into this host ---- */
#gamehost{position:fixed;inset:0;z-index:45;background:#1d3410;animation:fadeIn .25s}
body.in-game #hud,body.in-game #cursor{visibility:hidden}
.panel.games .row.lock{opacity:.62}
.panel.games .note{padding:10px 16px 12px}
.panel.games .note small{color:#FFE6B0;font-size:13px}

/* ---- compact layout: phones / small windows ---- */
@media (max-width:760px),(max-height:520px){
  #topbar{transform:scale(.74)}
  #topright{gap:5px}
  .sq{width:46px;height:46px;border-width:2px;border-radius:9px}
  .sq img{width:28px;height:28px;margin-top:-11px}
  .sq span{font-size:10px;bottom:-1px;left:-5px;right:-5px}
  #avatar{top:calc(62px + var(--sat));transform:scale(.8);transform-origin:0 0}
  #avatar span,#avatar small{display:none}
  .sq svg.mapic{width:28px;height:28px;margin-top:-11px}
  #gift{width:48px;height:48px;top:calc(140px + var(--sat))}
  #friendsbar{display:none}
  #palette{right:auto;left:50%;transform:translateX(-50%);bottom:calc(12px + var(--sab));gap:6px}
  .tool{width:56px;height:56px;padding:4px}
  #side{right:calc(8px + var(--sar));bottom:calc(84px + var(--sab));flex-direction:column}
  .rnd{width:38px;height:38px}
  #b-full{display:none}
  #radio-badge{display:none}
  #b-radio{display:block}
  #radiopanel{left:0;right:0;bottom:0;max-height:40vh;overflow:auto;border-radius:18px 18px 0 0;padding:0 8px calc(10px + var(--sab));display:flex;flex-direction:column;align-items:center;
    background:linear-gradient(#7a4a1e,#5a3412);animation-name:sheetUp}
  #radiopanel .grip{display:block;align-self:stretch;height:24px;cursor:grab;touch-action:none}
  #radiopanel .grip i{display:block;width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.6);margin:9px auto 0}
  #seedpick{right:50%;transform:translateX(50%);bottom:calc(80px + var(--sab));justify-content:center}
  #toasts{top:calc(64px + var(--sat))}
  .toast{font-size:13.5px;padding:10px 14px;pointer-events:auto;cursor:pointer}
  .toast .tx{-webkit-line-clamp:1;line-clamp:1}
  #placebar{bottom:calc(84px + var(--sab))}
  .tabs{grid-template-columns:repeat(5,1fr);gap:3px;padding:7px 8px 5px}
  .tabs button{font-size:10.5px;height:26px;padding:0 2px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
  .panel .head{height:54px}.panel .head h2{font-size:24px}
  .panel .head .masc{width:56px;height:56px}
  .panel .head .stars{gap:70px}
  .card .pic{height:80px}
  #hostplate{top:calc(58px + var(--sat));padding:3px 12px 3px 4px}
  #hostplate img{width:34px;height:34px}
  #hostplate b{font-size:14px}#hostplate small{font-size:11px}
  .gohome{height:40px}.gohome span{font-size:14px}
}
/* narrow portrait phones: the wood planks need the full width, so the square buttons drop to a second row */
@media (max-width:520px){
  #topright{top:calc(54px + var(--sat))}
  #hostplate{top:calc(106px + var(--sat))}
  #toasts{top:calc(120px + var(--sat))}
  body.visiting #toasts{top:calc(158px + var(--sat))}
  #gift{top:calc(186px + var(--sat))}
  .gohome{padding:0 10px 0 6px}.gohome span{font-size:13px}
  /* panels fill the width: the close button moves inside the header, one star per side, tabs become a swipeable strip */
  .panel .x{right:8px;top:9px;width:36px;height:36px;font-size:17px}
  .panel .head .masc.r{right:54px}
  .panel .head .stars{gap:112px}
  .panel .head .stars img:nth-child(2){display:none}
  .tabs{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:5px;padding:7px 8px 6px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto;font-size:12px;height:28px;padding:0 10px;overflow:visible}
}
@media (max-width:420px){.tool{width:52px;height:52px}#palette{gap:5px}}
@media (hover:none){#cursor{display:none}}