:root{
    --green:#6D8740; --green-d:#4B6C2E; --leaf:#8AA355;
    --ink:#2f3b3d; --teal:#438C91; --teal-l:#68a88e; --sky:#5782ba;
    --warn:#b04a58; --gold:#e3d176; --wood:#9e7565; --wood-d:#7c5a55;
    --parch:#ebcbbc; --parch-2:#e8cbac; --parch-d:#d1ae8a;
  }
  *{box-sizing:border-box}
  html,body{margin:0;min-height:100%;background:#2f3b3d;color:var(--ink);
    font-family:"DejaVu Sans Mono",ui-monospace,Menlo,Consolas,monospace;touch-action:manipulation;}
  img{image-rendering:pixelated}
  #app{max-width:1180px;margin:0 auto;padding:14px;padding-bottom:150px;}
  header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
  .logo{font-size:20px;font-weight:bold;color:var(--gold);letter-spacing:.5px;
    text-shadow:2px 2px 0 #2f3b3d;line-height:1.05;}
  .logo small{display:block;font-size:10px;color:var(--leaf);letter-spacing:1.5px;font-weight:normal;}
  .chip{background:var(--parch-2);border:3px solid var(--ink);border-radius:18px;
    padding:5px 12px;font-size:13px;font-weight:bold;display:flex;gap:6px;align-items:center;}
  .meters{margin-left:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
  .meter{min-width:160px;}
  .meter .lab{font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;
    color:var(--parch);display:flex;justify-content:space-between;}
  .bar{height:15px;background:#2a3537;border:3px solid var(--ink);border-radius:10px;overflow:hidden;}
  .bar>i{display:block;height:100%;width:30%;transition:width .25s;
    background:linear-gradient(90deg,var(--teal-l),var(--teal));}
  .bar.stand>i{background:linear-gradient(90deg,#c385d6,#864ea6);}
  /* resource bar */
  .resbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
  .res{background:var(--parch-2);border:3px solid var(--ink);border-radius:12px;
    padding:5px 11px;font-size:13px;font-weight:bold;display:flex;gap:6px;align-items:center;}
  .res small{font-weight:normal;color:var(--wood-d);font-size:10px;}
  .grid{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;align-items:start;}
  @media(max-width:840px){.grid{grid-template-columns:1fr}}
  .panel{background:var(--parch-2);border:3px solid var(--ink);border-radius:10px;padding:12px;
    box-shadow:0 6px 20px rgba(0,0,0,.25);}
  .panel h2{margin:0 0 4px;font-size:14px;letter-spacing:.5px;display:flex;align-items:center;gap:8px;}
  .panel .sub{font-size:11px;color:var(--wood-d);margin-bottom:10px;}
  .side{display:flex;flex-direction:column;gap:14px;}
  /* forecast calendar */
  .cal{display:flex;gap:6px;overflow-x:auto;padding:2px;}
  .cal-cell{flex:0 0 auto;width:78px;background:var(--parch);border:3px solid var(--ink);
    border-radius:9px;padding:6px 3px;text-align:center;}
  .cal-cell.today{outline:3px solid var(--gold);outline-offset:1px;}
  .cal-cell.now{background:#f6e7b0;}
  .cal-cell .dow{font-size:10px;color:var(--wood-d);text-transform:uppercase;font-weight:bold;}
  .cal-cell .dom{font-size:15px;font-weight:bold;}
  .cal-cell .ico{font-size:19px;line-height:1.2;}
  .cal-cell .mm{font-size:10px;color:var(--sky);font-weight:bold;min-height:12px;}
  .cal-cell .sw{font-size:10px;color:var(--wood-d);}
  /* cute cat-paw cursor + yard decor */
  html,body{cursor:url('assets/ui/catpaw.png') 5 4, auto;}
  input,textarea{cursor:text;}
  #yardpaths{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
  .decor{position:absolute;transform:translate(-50%,-88%);z-index:1;pointer-events:none;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.18));}
  .yardchick{position:absolute;transform:translate(-50%,-100%);z-index:3;pointer-events:none;image-rendering:pixelated;width:5%;}
  .slot .anim{image-rendering:pixelated;width:60%;}
  /* organic ring yard */
  .plot{position:relative;width:100%;max-width:560px;margin:6px auto 0;aspect-ratio:1/1;
    background:radial-gradient(circle at 50% 45%, #7e9b50 0%, #6d8740 55%, #5e7837 100%);
    border:3px solid var(--ink);border-radius:22px;overflow:hidden;}
  #house{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:26%;z-index:1;
    image-rendering:pixelated;filter:drop-shadow(0 4px 0 rgba(0,0,0,.22));pointer-events:none;}
  .slot{position:absolute;width:22%;aspect-ratio:1/1;background:var(--parch);border:3px solid var(--ink);
    padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    z-index:2;overflow:visible;transition:transform .14s,box-shadow .14s,outline-color .14s;}
  .slot:hover{transform:scale(1.07);box-shadow:0 8px 18px rgba(0,0,0,.4);z-index:6;}
  .slot.empty{border-style:dashed;cursor:pointer;color:var(--wood-d);}
  .slot.empty .plus{font-size:24px;font-weight:bold;}
  .slot .art{width:34px;height:64px;display:flex;align-items:flex-end;justify-content:center;}
  .slot canvas{width:34px;height:64px;}
  .slot .iico{width:72%;image-rendering:pixelated;}
  .slot .nm{font-size:8.5px;font-weight:bold;text-align:center;line-height:1.05;}
  .slot .out{font-size:8px;font-weight:bold;color:var(--green-d);text-align:center;line-height:1.15;}
  .slot .out .bad{color:var(--warn);}
  .miniwrap{width:88%;display:flex;flex-direction:column;gap:2px;margin-top:2px;}
  .mini{height:5px;background:#cdb79f;border:1px solid var(--ink);border-radius:4px;overflow:hidden;}
  .mini>i{display:block;height:100%;width:50%;}
  .mini.g>i{background:var(--green)} .mini.w>i{background:#5782ba} .mini.n>i{background:#b07a3a}
  .status{font-size:7.5px;font-weight:bold;text-align:center;min-height:9px;}
  .ribbon{position:absolute;top:-7px;right:-7px;font-size:8px;background:var(--warn);color:#fff;
    border:2px solid var(--ink);border-radius:8px;padding:0 4px;font-weight:bold;z-index:7;}
  .demolish{position:absolute;top:-9px;left:-9px;width:20px;height:20px;border-radius:50%;
    border:2px solid var(--ink);background:#d6665a;color:#fff;font-size:11px;font-weight:bold;
    cursor:pointer;display:none;line-height:1;padding:0;z-index:7;}
  .slot:hover .demolish{display:block;}
  button{font-family:inherit;cursor:pointer;border:3px solid var(--ink);border-radius:7px;
    background:var(--gold);color:var(--ink);font-weight:bold;font-size:11px;padding:5px 7px;}
  button:hover:not(:disabled){filter:brightness(1.06)}
  button:active:not(:disabled){transform:translateY(1px)}
  button:disabled{opacity:.45;cursor:not-allowed}
  button.alt{background:var(--teal-l);color:#fff}
  button.warnbtn{background:var(--warn);color:#fff}
  button.big{font-size:14px;padding:9px 14px}
  /* rows */
  .row{display:flex;align-items:center;gap:8px;padding:5px;border:2px solid transparent;border-radius:8px;}
  .row canvas{width:24px;height:48px;}
  .row .emoji{width:24px;font-size:20px;text-align:center;}
  .row .info{flex:1;font-size:12px;line-height:1.2}
  .row .info small{color:var(--wood-d);font-size:10px}
  .row .ct{font-weight:bold;font-size:13px}
  .seedwrap{border:2px solid transparent;border-radius:9px;margin-bottom:2px;cursor:pointer;}
  .seedwrap.open{border-color:var(--ink);background:#f6e7b0;}
  .seedrow.sel{background:#f3ddca;}
  .seedrow .caret{font-size:11px;color:var(--wood-d);transition:transform .2s;margin-left:2px;}
  .seedwrap.open .seedrow .caret{transform:rotate(90deg);}
  .seedinfo{max-height:0;overflow:hidden;transition:max-height .28s ease;padding:0 10px;font-size:11.5px;line-height:1.55;}
  .seedwrap.open .seedinfo{max-height:260px;padding:6px 10px 9px;}
  .seedinfo .ln{margin:2px 0;}
  .freshwrap{flex:1}
  .fresh{height:7px;background:#cdb79f;border:2px solid var(--ink);border-radius:5px;overflow:hidden}
  .fresh>i{display:block;height:100%;background:var(--leaf)}
  .fresh.bad>i{background:var(--warn)}
  .deco{display:flex;gap:4px;margin-left:auto}
  .deco img{height:30px}
  #notif{font-size:11.5px;line-height:1.5;max-height:140px;overflow:auto;background:#fff;
    border:2px solid var(--ink);border-radius:8px;padding:6px 8px;}
  #notif div{padding:2px 0;border-bottom:1px dashed #e0cdbb}
  .hint{font-size:10.5px;color:var(--wood-d);margin-top:8px}
  .badge{display:inline-block;padding:1px 7px;border-radius:10px;font-weight:bold;font-size:10px;}
  .badge.good{background:#68a88e;color:#08231c}.badge.ok{background:#e3d176;color:#3a2d00}
  .badge.bad{background:#b04a58;color:#fff}.badge.q{background:#999;color:#fff}
  .cstock{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;font-weight:bold;margin:6px 0;}
  /* radial tool menu (corner) */
  #toolrack{position:fixed;right:18px;bottom:18px;z-index:40;width:64px;height:64px;}
  #toolfab{position:absolute;right:0;bottom:0;width:64px;height:64px;border-radius:50%;
    border:3px solid var(--ink);background:linear-gradient(#f6e7b0,#e3d176);font-size:26px;
    box-shadow:0 8px 22px rgba(0,0,0,.45);cursor:pointer;transition:transform .2s;}
  #toolrack.open #toolfab{transform:rotate(135deg);}
  .shed{position:absolute;right:6px;bottom:6px;width:52px;height:52px;}
  .tool{position:absolute;right:0;bottom:0;width:52px;height:52px;border-radius:50%;
    background:linear-gradient(#f3ddca,#e8cbac);border:3px solid var(--ink);
    display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab;
    user-select:none;touch-action:none;opacity:0;transform:scale(.2);pointer-events:none;
    transition:transform .22s ease,opacity .18s;box-shadow:0 6px 14px rgba(0,0,0,.35);}
  #toolrack.open .tool{opacity:1;pointer-events:auto;}
  #toolrack.open .tool:nth-child(1){transform:translate(-4px,-80px);}
  #toolrack.open .tool:nth-child(2){transform:translate(-50px,-64px);}
  #toolrack.open .tool:nth-child(3){transform:translate(-74px,-28px);}
  #toolrack.open .tool:nth-child(4){transform:translate(-82px,14px);}
  .tool:hover{filter:brightness(1.07);} .tool:active{cursor:grabbing;}
  .tool.sel{outline:3px solid var(--green-d);background:#f6e7b0;}
  .tool .ico{font-size:21px;line-height:1;} .tool .tn{font-size:7px;font-weight:bold;}
  #toolrack .armhint{position:absolute;right:74px;bottom:6px;width:148px;font-size:10px;font-weight:bold;
    text-align:right;color:var(--green-d);background:rgba(235,203,188,.96);border:2px solid var(--ink);
    border-radius:8px;padding:4px 7px;display:none;cursor:pointer;}
  #toolrack .armhint.show{display:block;}
  /* commons exchange rows */
  .exrow{display:flex;align-items:center;gap:7px;padding:6px;border:2px solid var(--ink);border-radius:9px;margin-bottom:6px;background:var(--parch);}
  .exrow .xi{font-size:18px;width:22px;text-align:center;}
  .exrow .xv{flex:1;font-size:12px;line-height:1.2;}
  .exrow .xv small{color:var(--wood-d);}
  .exrow button{font-size:11px;padding:4px 7px;}
  /* confirm dialog */
  #confirm{position:fixed;inset:0;background:rgba(47,59,61,.8);z-index:52;display:none;align-items:center;justify-content:center;padding:16px;}
  #confirm .card{background:var(--parch-2);border:4px solid var(--ink);border-radius:14px;padding:18px;max-width:360px;width:100%;}
  #confirm p{font-size:14px;line-height:1.5;margin:0;}
  #dragGhost{position:fixed;z-index:60;font-size:38px;pointer-events:none;
    transform:translate(-50%,-120%) rotate(-16deg);filter:drop-shadow(0 5px 4px rgba(0,0,0,.45));display:none;}
  body.dragging{cursor:grabbing;}
  .slot.drop-ok{outline:3px solid var(--green);outline-offset:2px;transform:scale(1.04);box-shadow:0 0 20px rgba(109,135,64,.75);}
  .slot.drop-bad{outline:3px solid var(--warn);outline-offset:2px;}
  .slot.armed{outline:2px dashed var(--green);outline-offset:2px;}
  .slot.living .art canvas{animation:sway 3.4s ease-in-out infinite;transform-origin:bottom center;}
  @keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
  .slot.pop{animation:bedpop .34s ease;}
  @keyframes bedpop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
  .fx-drop{position:absolute;top:4px;width:6px;height:11px;background:#5782ba;opacity:.9;
    border-radius:50% 50% 50% 50%/60% 60% 40% 40%;pointer-events:none;animation:fxdrop .75s ease-in forwards;}
  @keyframes fxdrop{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}
    100%{transform:translateY(84px) scale(1.5,.4);opacity:0}}
  .fx-poof{position:absolute;top:42%;left:50%;font-size:26px;pointer-events:none;animation:fxpoof .66s ease-out forwards;}
  @keyframes fxpoof{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}40%{opacity:1}
    100%{transform:translate(-50%,-135%) scale(1.3);opacity:0}}
  .fx-spark{position:absolute;top:30%;font-size:16px;pointer-events:none;animation:fxspark .9s ease-out forwards;}
  @keyframes fxspark{0%{transform:translateY(0) scale(.5);opacity:0}30%{opacity:1}
    100%{transform:translateY(-48px) scale(1.1) rotate(20deg);opacity:0}}
  .fx-float{position:absolute;top:6px;left:50%;font-weight:bold;font-size:13px;pointer-events:none;
    text-shadow:0 1px 0 #fff;animation:fxfloat 1s ease-out forwards;}
  @keyframes fxfloat{0%{transform:translate(-50%,8px);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-28px);opacity:0}}
  /* modal */
  #modal{position:fixed;inset:0;background:rgba(47,59,61,.8);z-index:45;display:none;
    align-items:center;justify-content:center;padding:16px;}
  #modal .card{background:var(--parch-2);border:4px solid var(--ink);border-radius:14px;
    padding:16px;max-width:460px;width:100%;max-height:88vh;overflow:auto;}
  #modal h3{margin:.1em 0 10px;}
  .build-row{display:flex;align-items:center;gap:10px;padding:8px;border:2px solid var(--ink);
    border-radius:10px;margin-bottom:8px;background:var(--parch);}
  .build-row .bi{font-size:30px;width:40px;text-align:center;}
  .build-row .bd{flex:1;font-size:12px;line-height:1.3;}
  .build-row .bd small{color:var(--wood-d);}
  .cost{font-size:11px;font-weight:bold;}
  .cost .miss{color:var(--warn);}
  /* overlay / setup */
  #ov{position:fixed;inset:0;background:rgba(47,59,61,.95);color:#ebf0ee;z-index:50;
    display:flex;align-items:center;justify-content:center;padding:20px}
  #ov .card{max-width:620px}
  #ov h1{color:var(--gold);font-size:30px;margin:.1em 0}
  #ov p{font-size:13.5px;line-height:1.6}
  .tag{color:var(--gold)}
  .setup{margin:16px 0;text-align:left;background:rgba(255,255,255,.06);border:2px solid #5c6163;border-radius:10px;padding:14px}
  .setup label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#abdbb8}
  #farmInput{width:100%;margin-top:6px;font-family:inherit;font-size:17px;padding:9px;
    border:3px solid #000;border-radius:8px;background:#ebf0ee;color:#2f3b3d}
  #locLine{margin-top:10px;font-size:12.5px;color:#8CBADE}
  #win{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(47,59,61,.85);z-index:55}
  #auth{position:fixed;inset:0;background:rgba(40,55,45,.97);color:#eef6ec;z-index:60;display:none;align-items:center;justify-content:center;padding:20px;}
  #auth .card{max-width:420px;text-align:center;} #auth h1{color:var(--gold);font-size:28px;margin:.1em 0;} #auth p{font-size:13px;line-height:1.5;}
  #auth input{width:100%;margin-top:6px;font-family:inherit;font-size:16px;padding:9px;border:3px solid #000;border-radius:8px;background:#ebf0ee;color:#2f3b3d;}
  #auth label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#abdbb8;}
  #win .card{background:var(--parch-2);border:4px solid var(--ink);border-radius:14px;padding:24px 30px;text-align:center;max-width:480px}
  #win h1{color:var(--green-d);margin:.1em 0}
  @media (max-width:760px){
    #app{padding:8px;padding-bottom:160px;}
    .logo{font-size:17px;flex-basis:100%;}
    .meters{margin-left:0;width:100%;}
    .plot{max-width:none;}
    #toolrack{right:12px;bottom:12px;}
    #notif{max-height:84px;}
  }
  /* ===== Sprout Lands UI reskin (first taste: panels + buttons) ===== */
  .panel{background:transparent;border:15px solid transparent;border-image:url('assets/ui/panel.png') 8 fill stretch;
    border-radius:0;padding:4px 10px 10px;box-shadow:0 7px 18px rgba(0,0,0,.32);}
  .panel h2{color:#6b4d28;}
  .panel .sub{color:#8a6a42;}
  button:not(.demolish):not(.chip):not(#toolfab){background:transparent;color:#4a3411;
    border:9px solid transparent;border-image:url('assets/ui/btn.png') 8 fill stretch;border-radius:0;
    text-shadow:0 1px 0 rgba(255,255,255,.45);}
  button:not(.demolish):not(.chip):not(#toolfab):hover:not(:disabled){filter:brightness(1.06);}
  button.warnbtn{filter:hue-rotate(-22deg) saturate(1.6) brightness(.96);}
  button.big{border-width:12px;}
  /* ============ CLEAN MODERN THEME ============ */
  *{image-rendering:auto!important;}
  html,body{background:linear-gradient(180deg,#eef6ec,#e4efe0 55%,#d9e8d2)!important;color:#36454b!important;
    font-family:'Quicksand','Nunito',-apple-system,'Segoe UI',system-ui,sans-serif!important;cursor:auto!important;}
  input,textarea{cursor:text!important;}
  .logo{color:#3b8a52!important;text-shadow:none!important;font-weight:800!important;}
  .logo small{color:#9bb38c!important;font-weight:600!important;}
  .chip{background:#fff!important;border:1.5px solid #e2e8da!important;border-radius:999px!important;color:#46584e!important;box-shadow:0 2px 6px rgba(70,90,55,.08)!important;font-weight:700!important;}
  .meter .lab{color:#5f7165!important;}
  .bar{background:#e7ede1!important;border:1.5px solid #d6e0cc!important;border-radius:999px!important;height:13px!important;}
  .bar>i{background:linear-gradient(90deg,#86cf86,#4caf6d)!important;}
  .bar.stand>i{background:linear-gradient(90deg,#bfa6e6,#8a6bd6)!important;}
  .bar.water>i{background:linear-gradient(90deg,#8ed0ee,#4a9fd6)!important;}
  .res{background:#fff!important;border:1.5px solid #e2e8da!important;border-radius:14px!important;color:#46584e!important;box-shadow:0 2px 6px rgba(70,90,55,.07)!important;}
  .res small{color:#9aa897!important;}
  .panel{background:#fff!important;border:1.5px solid #e4eadd!important;border-image:none!important;border-radius:18px!important;box-shadow:0 8px 24px rgba(70,90,55,.10)!important;padding:14px 16px!important;color:#46584e!important;}
  .panel h2{color:#3b8a52!important;font-weight:800!important;}
  .panel .sub{color:#9aa897!important;}
  #notif{background:#f6faf3!important;border:1.5px solid #e4eadd!important;border-radius:12px!important;}
  #notif div{border-bottom:1px dashed #e6ece0!important;}
  .hint{color:#9aa897!important;}
  button:not(.demolish):not(.chip):not(#toolfab){background:#4caf6d!important;color:#fff!important;border:none!important;border-image:none!important;border-radius:12px!important;font-weight:700!important;box-shadow:0 3px 0 #3a8a53!important;text-shadow:none!important;padding:8px 12px!important;filter:none!important;}
  button.alt:not(.demolish):not(.chip):not(#toolfab){background:#4a9fd6!important;box-shadow:0 3px 0 #357fb0!important;}
  button.warnbtn{background:#e07a6b!important;box-shadow:0 3px 0 #b85647!important;filter:none!important;}
  button:not(.demolish):not(.chip):not(#toolfab):hover:not(:disabled){filter:brightness(1.05)!important;transform:translateY(-1px);}
  button:not(.demolish):not(.chip):not(#toolfab):active:not(:disabled){transform:translateY(2px);box-shadow:none!important;}
  .plot{background:radial-gradient(circle at 50% 46%, #ecf6e6 0%, #ddecd4 60%, #d0e4c5 100%)!important;border:2px solid #d6e2cb!important;border-radius:26px!important;box-shadow:inset 0 0 32px rgba(120,150,90,.12)!important;}
  #house{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:1;font-size:min(13vw,70px);line-height:1;filter:drop-shadow(0 5px 6px rgba(0,0,0,.16));}
  .slot{background:#fff!important;border:2px solid #e4eadd!important;border-radius:50%!important;box-shadow:0 7px 16px rgba(70,90,55,.16)!important;padding:6px!important;}
  .slot:hover{transform:scale(1.07);box-shadow:0 10px 22px rgba(70,90,55,.26)!important;}
  .slot.empty{background:rgba(255,255,255,.5)!important;border-style:dashed!important;border-color:#bcd3b4!important;}
  .slot .plus{font-size:min(7vw,28px);color:#7bbd80;} .slot .elabel{font-size:10px;color:#9fb89a;font-weight:700;}
  .slot .emoji{font-size:min(12vw,42px);line-height:1;transition:transform .35s,opacity .35s;}
  .slot .emoji.bob{animation:bob 1.7s ease-in-out infinite;}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  .slot.living .emoji{animation:sway 3.6s ease-in-out infinite;}
  @keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
  .slot .nm{font-size:9px;font-weight:700;color:#5f7165;margin-top:1px;text-align:center;}
  .slot .out{font-size:8.5px;font-weight:700;color:#3b8a52;text-align:center;line-height:1.2;}
  .slot .pbar{width:72%;height:5px;background:#e7ede1;border-radius:999px;overflow:hidden;margin-top:4px;}
  .slot .pbar>i{display:block;height:100%;background:linear-gradient(90deg,#86cf86,#4caf6d);transition:width .3s;}
  .slot .dots{display:flex;gap:5px;margin-top:4px;}
  .slot .dot{width:8px;height:8px;border-radius:50%;}
  .slot .dot.w{background:#4a9fd6;}
  .slot .status{font-size:8px;font-weight:700;color:#86948a;margin-top:2px;text-align:center;min-height:9px;}
  .slot canvas,.slot .art,.slot .iico,.slot .anim,.decor,.yardchick{display:none!important;}
  .ribbon{background:#4caf6d!important;color:#fff!important;border:2px solid #fff!important;border-radius:999px!important;font-weight:800!important;box-shadow:0 2px 6px rgba(0,0,0,.18)!important;}
  .ribbon.bad{background:#e07a6b!important;}
  .demolish{background:#e07a6b!important;border:2px solid #fff!important;color:#fff!important;box-shadow:0 2px 6px rgba(0,0,0,.22)!important;}
  .seedwrap{border:1.5px solid transparent!important;border-radius:14px!important;}
  .seedwrap.open{background:#f1f8ee!important;border-color:#cfe3c4!important;}
  .seedrow.sel{background:#eef6ea!important;}
  .seedinfo{color:#5f7165!important;}
  .fresh{background:#e7ede1!important;border:1.5px solid #d6e0cc!important;border-radius:999px!important;}
  .fresh>i{background:#86cf86!important;} .fresh.bad>i{background:#e07a6b!important;}
  .exrow{background:#f6faf3!important;border:1.5px solid #e4eadd!important;border-radius:12px!important;}
  .cstock{color:#5f7165!important;}
  #toolfab{background:linear-gradient(#86cf86,#4caf6d)!important;border:none!important;color:#fff!important;box-shadow:0 6px 16px rgba(60,120,70,.42)!important;}
  .tool{background:#fff!important;border:1.5px solid #e4eadd!important;box-shadow:0 5px 12px rgba(70,90,55,.22)!important;}
  .tool.sel{outline:3px solid #4caf6d!important;background:#f1f8ee!important;}
  .tool .tn{color:#5f7165;}
  #toolrack .armhint{background:#fff!important;border:1.5px solid #e4eadd!important;color:#3b8a52!important;border-radius:10px!important;}
  .cal-cell{background:#fff!important;border:1.5px solid #e8ede2!important;border-radius:12px!important;}
  .cal-cell.today{outline:3px solid #4caf6d!important;outline-offset:1px;}
  .cal-cell.now{background:#f1f8ee!important;}
  .cal-cell .dow{color:#9fb39a!important;} .cal-cell .dom{color:#46584e!important;} .cal-cell .mm{color:#4a9fd6!important;} .cal-cell .sw{color:#9fb39a!important;}
  #modal .card,#confirm .card,#win .card{background:#fff!important;border:none!important;border-radius:20px!important;box-shadow:0 24px 70px rgba(0,0,0,.4)!important;color:#46584e!important;}
  #win h1{color:#3b8a52!important;}
  .build-row{background:#f6faf3!important;border:1.5px solid #e4eadd!important;border-radius:14px!important;}
  #ov{background:rgba(40,55,45,.95)!important;} #ov .card{color:#eef6ec;} #ov h1{color:#bfe6c0!important;}
  /* ==== top-down square field + profile + fixes ==== */
  .plot{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important;
    aspect-ratio:auto!important;background:linear-gradient(160deg,#eaf6e2,#dcecd2)!important;
    border:2px solid #d6e2cb!important;border-radius:18px!important;padding:14px!important;box-shadow:inset 0 0 24px rgba(120,150,90,.10)!important;}
  @media(max-width:560px){.plot{grid-template-columns:repeat(2,1fr)!important;}}
  #house,#yardpaths{display:none!important;}
  .slot{position:relative!important;left:auto!important;top:auto!important;width:auto!important;aspect-ratio:1/1!important;border-radius:18px!important;}
  .slot:nth-child(4n+1){border-radius:20px 20px 24px 24px!important;transform:rotate(-1.5deg);}
  .slot:nth-child(4n+2){border-radius:28px 12px 28px 12px!important;transform:rotate(1.3deg);}
  .slot:nth-child(4n+3){border-radius:12px 28px 12px 28px!important;transform:rotate(-0.7deg);}
  .slot:nth-child(4n){border-radius:24px 16px 22px 18px!important;transform:rotate(0.9deg);}
  .slot:hover{transform:scale(1.06)!important;z-index:5;}
  .tool .tn{display:none!important;}
  /* clickable, always-visible demolish on built slots */
  .demolish{display:none;position:absolute!important;top:5px!important;right:5px!important;left:auto!important;
    width:24px!important;height:24px!important;border-radius:50%!important;z-index:9!important;font-size:13px!important;
    align-items:center;justify-content:center;line-height:1!important;}
  .slot:not(.empty) .demolish{display:flex!important;}
  /* commons exchange: keep give/take always visible */
  .exrow{flex-wrap:wrap!important;align-items:center!important;}
  .exrow .xv{flex:1 1 56%!important;min-width:90px;}
  .exrow button{flex:0 0 auto!important;}
  /* player profile */
  #playerPanel .profile{display:flex;gap:14px;align-items:flex-start;}
  .avatar{flex:0 0 auto;width:clamp(120px,40%,200px);aspect-ratio:200/320;border-radius:16px;
    background:linear-gradient(160deg,#eaf4e4,#d3e6c9);border:2px solid #d6e2cb;display:flex;align-items:center;justify-content:center;
    font-size:60px;box-shadow:inset 0 0 22px rgba(120,150,90,.16);overflow:hidden;}
  .avatar img{width:100%;height:100%;object-fit:cover;display:block;}
  .pinfo{flex:1;min-width:0;}
  .pname{font-size:19px;font-weight:800;color:#3b8a52;line-height:1.1;}
  .ploc{font-size:12px;color:#8a988e;margin:3px 0 10px;}
  .plab{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#9aa897;font-weight:700;margin-bottom:3px;}
  .pitems{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;}
  .pitem{background:#f6faf3;border:1.5px solid #e4eadd;border-radius:10px;padding:4px 9px;font-size:12.5px;font-weight:700;color:#46584e;}
  .pitems .hd{flex-basis:100%;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#9aa897;font-weight:700;margin-top:5px;}
  /* floating toast notifications (visible anywhere) */
  #toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;
    gap:8px;align-items:center;pointer-events:none;max-width:92vw;}
  .toast{background:#fff;border:1.5px solid #e2e8da;border-left:5px solid #4caf6d;border-radius:13px;padding:9px 15px;
    font-size:13px;font-weight:600;color:#46584e;box-shadow:0 10px 26px rgba(60,80,55,.24);max-width:380px;
    animation:tin .32s ease;}
  .toast.good{border-left-color:#4caf6d;} .toast.warn{border-left-color:#e07a6b;}
  .toast.out{animation:tout .4s ease forwards;}
  @keyframes tin{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes tout{to{opacity:0;transform:translateY(-10px)}}
  .slot .cropnm{font-size:10px;font-weight:800;color:#46584e;margin-top:1px;text-align:center;line-height:1.05;}
  .slot .stat{display:flex;gap:9px;margin-top:3px;font-size:9.5px;font-weight:700;color:#7a887e;}
  .slot .stat b{font-weight:800;margin-left:1px;}
  .semoji{font-size:22px;width:26px;text-align:center;line-height:1;} .emoji-sm{font-size:20px;width:24px;text-align:center;line-height:1;}
  .shed{position:absolute!important;right:0!important;bottom:72px!important;left:auto!important;top:auto!important;width:124px!important;height:auto!important;
    display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:8px!important;background:#fff;border:1.5px solid #e4eadd;
    border-radius:14px;padding:9px;box-shadow:0 12px 28px rgba(60,80,55,.3);opacity:0;transform:translateY(10px) scale(.92);
    transform-origin:bottom right;pointer-events:none;transition:opacity .18s,transform .2s;}
  #toolrack.open .shed{opacity:1!important;transform:none!important;pointer-events:auto!important;}
  .tool{position:static!important;width:auto!important;height:48px!important;opacity:1!important;transform:none!important;
    border-radius:12px!important;display:flex!important;align-items:center;justify-content:center;}
  .tool .ico{font-size:22px;}
  #notif div.pos{color:#2f7d46;} #notif div.neg{color:#c0564a;}
  .lrow{display:flex;align-items:center;gap:7px;padding:5px 2px;border-bottom:1px solid #eef1ea;}
  .lrow .li{font-size:18px;width:22px;text-align:center;} .lrow .ln{flex:1;font-size:12px;font-weight:600;color:#46584e;}
  .lrow .lq{font-size:12px;font-weight:800;color:#5f7165;margin-right:3px;} .lrow .gv{font-size:10px;padding:4px 7px;}
  #commonsGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
  .cg{background:#f6faf3;border:1.5px solid #e4eadd;border-radius:12px;padding:8px;text-align:center;}
  .cg .ci{font-size:24px;line-height:1;} .cg .cqt{font-size:12px;font-weight:800;color:#46584e;} .cg .cnm{font-size:9px;color:#8a988e;margin:1px 0 4px;}
  .cg .cbtns{display:flex;gap:3px;justify-content:center;} .cg .tk{font-size:10px;padding:3px 0;flex:1;border-radius:8px;}
  .slot .acts{margin-top:4px;width:100%;} .slot .acts .act{font-size:10px;padding:5px 8px;border-radius:10px;width:90%;}
  *{ -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
  input,textarea{ -webkit-user-select:text!important; user-select:text!important; }
  #armhint{display:none!important;}
  .panel h2{cursor:pointer;}
  .panel h2::after{content:'▾';margin-left:8px;color:#9aa897;font-size:11px;font-weight:700;}
  .panel.collapsed h2::after{content:'▸';}
  .panel.collapsed>*:not(h2){display:none!important;}
  .cg .cbtns{flex-wrap:wrap;gap:3px;} .cg .tk{font-size:9px;padding:3px 4px;flex:1 1 30%;}
  html.pc, html.pc *{ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M5 3 L5 22 L10 17 L13.5 24 L17 22.5 L13.5 15 L21 15 Z' fill='%234caf6d' stroke='%232f3b3d' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto !important; }
  .buildcat{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#3b8a52;margin:12px 0 4px;}
  .elab{font-size:11px;font-weight:700;color:#5f7165;} .bar.pow>i{background:linear-gradient(90deg,#f3d27a,#e0a23f);}
  .avwrap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;}
  #avBtn{font-size:10px;color:#3b8a52;cursor:pointer;text-decoration:underline;font-weight:700;}
  .avatar img{width:100%;height:100%;object-fit:cover;display:none;border-radius:14px;}
  .pacct{font-size:11px;color:#8a988e;font-weight:700;margin:1px 0;}
  .orow{display:flex;align-items:center;gap:9px;padding:4px 2px;border-bottom:1px solid #eef1ea;}
  .oav{width:28px;height:28px;border-radius:50%;object-fit:cover;background:#eaf4e4;border:1.5px solid #d6e2cb;display:inline-flex;align-items:center;justify-content:center;font-size:16px;}
  .onm{font-size:13px;font-weight:700;color:#46584e;}
  /* ===== flip-to-info cards ===== */
  .slot .flip3d{position:relative;width:100%;height:100%;transition:transform .4s ease;transform-style:preserve-3d;}
  .slot.flipped .flip3d{transform:rotateY(180deg);}
  .slot.flipped{z-index:20!important;}
  .slot .face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    -webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:inherit;}
  .slot .face.back{transform:rotateY(180deg);background:#fff;border-radius:inherit;overflow:auto;
    align-items:stretch;justify-content:flex-start;text-align:left;padding:7px 8px 8px;}
  .slot.flipped .demolish{display:none!important;}
  .cardinfo{display:none;position:absolute;top:5px;left:5px;width:21px;height:21px;border-radius:50%;
    border:2px solid #fff;background:#7bbd80;color:#fff;font-size:12px;font-weight:800;font-style:italic;
    cursor:pointer;z-index:12;align-items:center;justify-content:center;line-height:1;padding:0;
    box-shadow:0 2px 6px rgba(0,0,0,.2);font-family:Georgia,'Times New Roman',serif;}
  .slot:not(.empty) .cardinfo{display:flex;}
  .slot.flipped .cardinfo{background:#e07a6b;}
  .cardback-h{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:800;color:#3b8a52;
    min-height:19px;padding-left:23px;margin-bottom:3px;border-bottom:1px solid #eef1ea;padding-bottom:2px;}
  .cardback-h .bi{font-size:14px;}
  .cardback-l{font-size:8px;line-height:1.35;color:#5f7165;margin:2px 0;}
  /* ===== community: chat / offers / neighbours ===== */
  #chatLog{font-size:12px;line-height:1.45;max-height:170px;overflow:auto;background:#f6faf3;
    border:1.5px solid #e4eadd;border-radius:12px;padding:7px 9px;}
  .cmsg{padding:2px 0;border-bottom:1px solid #eef1ea;color:#46584e;}
  .cmsg .cu{font-weight:800;color:#3b8a52;}
  .cmsg.me .cu{color:#4a9fd6;}
  .chatbar{display:flex;gap:6px;margin-top:8px;}
  .chatbar input{flex:1;font-family:inherit;font-size:13px;padding:8px;border:1.5px solid #d6e0cc;
    border-radius:10px;background:#fff;color:#46584e;}
  .offerrow{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#5f7165;margin-bottom:6px;}
  .offerrow select{flex:1;font-family:inherit;font-size:12px;padding:6px;border:1.5px solid #d6e0cc;border-radius:9px;background:#fff;color:#46584e;}
  .offerrow input{width:52px;font-family:inherit;font-size:12px;padding:6px;border:1.5px solid #d6e0cc;border-radius:9px;background:#fff;color:#46584e;}
  .offer{display:flex;align-items:center;gap:8px;background:#f6faf3;border:1.5px solid #e4eadd;
    border-radius:11px;padding:7px 9px;margin-bottom:6px;}
  .offer .od{flex:1;font-size:12px;color:#46584e;}
  .offer button{font-size:11px;padding:5px 9px;}
  .nbview{font-size:11px;padding:5px 10px;flex:0 0 auto;}
  .doton{color:#4caf6d;font-size:10px;}
  /* neighbour modal */
  .nbsub{font-size:12px;color:#8a988e;margin-bottom:10px;}
  .nbplot{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;}
  .nbcell{background:#f6faf3;border:1.5px solid #e4eadd;border-radius:14px;padding:8px 4px;text-align:center;}
  .nbcell.empty{color:#b7c7ae;font-size:20px;font-weight:800;}
  .nbcell .nbe{font-size:26px;line-height:1.1;}
  .nbcell .nbn{font-size:9px;font-weight:700;color:#5f7165;margin-top:2px;line-height:1.05;}
  .nbcell .nbp{font-size:9px;font-weight:800;color:#3b8a52;}
  .nblab{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#9aa897;font-weight:700;margin:12px 0 4px;}
  .nbitems{display:flex;flex-wrap:wrap;gap:6px;}