:root{--elka-positive-surface:radial-gradient(ellipse at 32% 16%,#b6ffd14d,transparent 62%),linear-gradient(160deg,#39a65cdd,#116b42e6);--elka-negative-surface:radial-gradient(ellipse at 32% 16%,#ffd4e04d,transparent 62%),linear-gradient(160deg,#e45072e6,#9c2048e6)}
:root{
  --elka-control-glow:inset 0 0 8px #e8f1ff80,inset 0 -6px 12px #15295433,0 0 5px #effaffcc,0 0 16px #8babff80,0 6px 16px #10255355;
  --elka-control-hover:inset 0 0 10px #fff9,0 0 7px #f3ffff,0 0 22px #a9c8ffb3,0 6px 18px #10255355;
  --elka-control-surface:linear-gradient(155deg,#b6c2ff55,#4b5bb399 40%,#243a8780);
  --elka-glass-surface:radial-gradient(ellipse at 8% 8%,#edf5ff40,transparent 42%),radial-gradient(ellipse at 96% 100%,#bbdfff38,transparent 46%),linear-gradient(125deg,#cbd6ff52,#b6c7f82b 40%,#9dadf452 76%,#dae6ff47);
  --elka-glass-rim:inset 0 0 12px #e1eeff66,inset 0 -3px 8px #91acf14d,0 0 4px #e6f6ffb3,0 0 13px #a7ceff99,0 0 28px #679bff59,0 8px 22px #14295940;
  --elka-soft-cell:radial-gradient(ellipse at 35% 15%,#f0f4ff6b,transparent 82%),linear-gradient(150deg,#e1e9ff52,#c5d4fa33);
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%}body{overflow:hidden;background:#071b3c;font-family:system-ui,sans-serif}body:not(.editing) #game,body:not(.editing) #game *{-webkit-user-select:none;user-select:none}
#game{position:relative;width:100vw;height:100vh;min-width:900px;min-height:520px;overflow:hidden}
#scene{position:absolute;inset:0;background:#071b3c}
#scene-background{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("../assets/background.webp");background-size:cover;background-position:center;background-repeat:no-repeat}
.passive-scene-layer{position:absolute;inset:0;pointer-events:none}
#scene-back{z-index:1}
#scene-front{z-index:6}
#world-slots{z-index:4}
.world-slot{position:absolute;pointer-events:auto;cursor:default;outline:none}
.world-slot>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.world-slot-art{position:relative;z-index:1}
.world-slot-halo{position:absolute;inset:0;z-index:0;filter:brightness(0) invert(1) blur(4px) drop-shadow(0 0 8px #d4efff);opacity:0;transition:opacity .3s ease}
.world-slot:hover .world-slot-halo,.world-slot:focus-visible .world-slot-halo{opacity:.68}
.world-slot[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 10px);z-index:3;box-sizing:border-box;padding:9px 13px 10px;border:1px solid #deefffa6;border-radius:14px;background:var(--elka-glass-surface);box-shadow:var(--elka-glass-rim);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);color:#f7fbff;font:650 13px/1.3 system-ui,sans-serif;text-align:center;text-shadow:0 1px 3px #18305866;white-space:nowrap;opacity:0;visibility:hidden;transform:translate(-50%,6px) scale(.98);transform-origin:50% 100%;pointer-events:none;transition:opacity .16s ease,visibility .16s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
.world-slot[data-tooltip]::before{content:"";position:absolute;left:50%;bottom:calc(100% + 6px);z-index:4;width:8px;height:8px;border-right:1px solid #deefffa6;border-bottom:1px solid #deefffa6;background:#8fa5dacc;transform:translateX(-50%) rotate(45deg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s ease}
.world-slot[data-tooltip]:hover::after,.world-slot[data-tooltip]:hover::before,.world-slot[data-tooltip]:focus-visible::after,.world-slot[data-tooltip]:focus-visible::before{opacity:1;visibility:visible}
.world-slot[data-tooltip]:hover::after,.world-slot[data-tooltip]:focus-visible::after{transform:translate(-50%,0) scale(1)}
body.editing .world-slot,body.branch-round-active .world-slot{pointer-events:none}
body.branch-round-active .world-slot .world-slot-halo{opacity:0}
body.branch-round-active .world-slot[data-tooltip]::after,body.branch-round-active .world-slot[data-tooltip]::before{opacity:0;visibility:hidden}
.world-slot-factory{left:7%;bottom:22%;width:27%;height:35%}
.world-slot-mailbox{right:12%;top:29%;width:15%;height:28%}
.world-slot-reindeer{right:0%;bottom:17%;width:25%;height:34%}
@media(prefers-reduced-motion:reduce){.world-slot-halo,.world-slot[data-tooltip]::after{transition:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.world-slot[data-tooltip]::after{background:linear-gradient(135deg,#8096c9f5,#526ba3f5)}}
#snow{position:absolute;inset:0;pointer-events:none;overflow:hidden}
body.scene-overlay-open #snow{visibility:hidden}
body.scene-overlay-open #snow .flake{animation-play-state:paused}
.flake{position:absolute;top:-20px;color:white;opacity:.78;animation:fall linear infinite;text-shadow:0 0 6px rgba(255,255,255,.8)}
@keyframes fall{to{transform:translate3d(25px,105vh,0) rotate(180deg)}}
#new-year-counter,#round-status{position:absolute;padding:10px 16px;border-radius:14px;background:rgb(24 50 91/.78);border:1px solid rgb(255 255 255/.65);color:white;font-weight:700;z-index:20}
#new-year-counter{top:20px;left:20px}
#branch-timer{
  position:absolute;top:20px;left:50%;z-index:20;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  min-height:50px;padding:0 20px;
  border:1px solid #dceeffa6;border-radius:999px;
  appearance:none;
  background:var(--elka-glass-surface);
  color:#f7faff;
  box-shadow:var(--elka-glass-rim);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  text-shadow:0 2px 4px #10255b66;
  font:inherit;
  cursor:default;
  overflow:visible;
  transition:filter .16s ease,box-shadow .16s ease,background .16s ease;
}
#branch-timer[hidden]{display:none}
#branch-timer[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  top:calc(100% + 9px);
  left:50%;
  transform:translate(-50%,-4px);
  padding:7px 10px;
  border:1px solid #dceeff75;
  border-radius:10px;
  background:rgb(16 30 71/.94);
  color:#f6f9ff;
  box-shadow:0 8px 24px #08174666;
  font:650 13px/1.2 system-ui;
  text-shadow:none;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease,transform .14s ease;
}
#branch-timer[data-tooltip]:hover::after{
  opacity:1;
  transform:translate(-50%,0);
}
#branch-timer.is-ready{
  padding:0 24px;
  cursor:pointer;
  background:var(--elka-control-surface);
}
#branch-timer.is-ready:hover{
  filter:brightness(1.12);
  box-shadow:var(--elka-control-hover);
}
#branch-timer:focus-visible{
  outline:2px solid #efffff;
  outline-offset:3px;
}
.branch-timer-ornament{
  position:relative;
  width:28px;
  height:32px;
  flex:0 0 auto;
  pointer-events:none;
  transform-origin:50% 2px;
  animation:branchTimerOrnamentSway 2.8s ease-in-out infinite;
  will-change:transform;
}
.branch-timer-ornament .ornament-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:1;
  filter:drop-shadow(0 2px 4px #10255b61) drop-shadow(0 0 6px #eaf5ff38);
}
@keyframes branchTimerOrnamentSway{
  0%{transform:rotate(-5deg)}
  50%{transform:rotate(5deg)}
  100%{transform:rotate(-5deg)}
}
#branch-timer #timer{
  min-width:72px;
  color:#fff;
  font:800 18px/1 system-ui;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.branch-ready-label{
  display:none;
  color:#fff;
  font:800 17px/1 system-ui;
  white-space:nowrap;
}
#branch-timer.is-ready .branch-timer-ornament,
#branch-timer.is-ready #timer{
  display:none;
}
#branch-timer.is-ready .branch-ready-label{
  display:block;
}
#round-status{top:80px;left:50%;transform:translateX(-50%);font-size:14px}
#round-status:empty{display:none}

.branch-action-warning{
  position:absolute;
  top:84px;
  left:50%;
  z-index:44;
  min-width:280px;
  max-width:min(420px,calc(100vw - 40px));
  padding:11px 20px 12px;
  transform:translate(-50%,-6px) scale(.98);
  border:1px solid #dceeffb8;
  border-radius:999px;
  background:
    radial-gradient(ellipse at 24% 0%,rgba(239,248,255,.26),transparent 58%),
    linear-gradient(155deg,rgba(113,135,209,.76),rgba(49,71,143,.88) 48%,rgba(25,48,110,.92));
  color:#f8fbff;
  box-shadow:
    inset 0 0 9px rgba(232,241,255,.34),
    0 0 5px rgba(239,250,255,.66),
    0 0 18px rgba(139,171,255,.38),
    0 8px 22px rgba(8,23,70,.38);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  font:750 14px/1.25 system-ui,sans-serif;
  letter-spacing:.01em;
  text-align:center;
  text-shadow:0 2px 4px rgba(16,37,91,.6);
  opacity:0;
  pointer-events:none;
}
.branch-action-warning[hidden]{display:none}
.branch-action-warning.is-visible{
  animation:branchActionWarningIn 1.7s cubic-bezier(.2,.72,.24,1) both;
}
@keyframes branchActionWarningIn{
  0%{opacity:0;transform:translate(-50%,-8px) scale(.97)}
  12%,78%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-3px) scale(.99)}
}
body.branch-round-active #tools button,
body.branch-round-active #friends .friend{
  cursor:not-allowed;
  filter:saturate(.7) brightness(.88);
  opacity:.78;
}

#tree{--tree-width:7.5vw;--tree-bottom:27vh;position:absolute;left:50%;bottom:var(--tree-bottom);width:var(--tree-width);aspect-ratio:.72;transform:translateX(-50%);text-align:center;color:white;z-index:5;transition:none}
.tree-art{position:absolute;inset:0;transform-origin:50% 100%}
.tree-base{position:absolute;inset:0;display:grid;place-items:end center;filter:drop-shadow(0 8px 14px rgb(0 0 0/.3))}
.tree-placeholder{position:absolute;inset:0;transform-origin:50% 100%;background:rgb(55 210 80/.22);clip-path:polygon(50% 0,100% 100%,0 100%);outline:2px solid #39e75f}
.tree-placeholder::after{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,100% 100%,0 100%);border:3px solid #39e75f}
.tree-stage-zero{display:none}
#tree[data-stage="0"] .tree-placeholder{display:none}
.stage-one-tree,.stage-two-tree,.stage-three-tree,.stage-four-tree,.stage-five-tree{display:none;position:absolute;left:50%;bottom:0;width:100%;height:auto;transform:translateX(-50%);object-fit:contain;pointer-events:none;z-index:2}
#tree[data-stage="1"] .stage-one-tree,#tree[data-stage="2"] .stage-two-tree,#tree[data-stage="3"] .stage-three-tree,#tree[data-stage="4"] .stage-four-tree,#tree[data-stage="5"] .stage-five-tree{display:block}
#tree[data-stage="1"] .tree-placeholder,#tree[data-stage="2"] .tree-placeholder,#tree[data-stage="3"] .tree-placeholder,#tree[data-stage="4"] .tree-placeholder,#tree[data-stage="5"] .tree-placeholder{display:none}
.stage-zero-tree,.stage-zero-snow{display:none;position:absolute;object-fit:contain;pointer-events:none}
.stage-zero-tree{z-index:2;left:50%;bottom:5%;width:176.4%;height:auto;transform:translateX(-50%)}
.stage-zero-snow{height:auto;transform:translateX(-50%)}
.snow-new-back{z-index:1;left:50%;bottom:30%;width:315%}
.snow-new-left{z-index:3;left:18%;bottom:29%;width:300%}
.snow-new-right{z-index:3;left:82%;bottom:25%;width:230%}
#tree[data-stage="0"] .stage-zero-tree,#tree[data-stage="0"] .stage-zero-snow,#tree.first-growth .stage-zero-tree,#tree.first-growth .stage-zero-snow{display:block}
#tree.first-growth .stage-zero-tree{z-index:2;animation:firstGrowthSprout 1.55s ease-in-out forwards}
#tree.first-growth .snow-new-back{animation:firstGrowthSnowNewBack 2.15s ease-in-out forwards}
#tree.first-growth .snow-new-left{animation:firstGrowthSnowNewLeft 2.15s ease-in-out forwards}
#tree.first-growth .snow-new-right{animation:firstGrowthSnowNewRight 2.15s ease-in-out forwards}
#tree.first-growth .stage-one-tree{z-index:2;width:200%;animation:firstGrowthTreeOne 1.25s cubic-bezier(.16,.84,.24,1) both}

@keyframes firstGrowthSnowNewBack{
  0%,22%{transform:translateX(-50%) translateY(0) scale(1);opacity:1}
  38%{transform:translateX(-50%) translateY(2%) scale(1.01)}
  55%{transform:translateX(-50%) translateY(5%) scale(1.02);opacity:1}
  100%{transform:translateX(-50%) translateY(24%) scale(1.06);opacity:0}
}
@keyframes firstGrowthSnowNewLeft{
  0%,20%{transform:translateX(-50%) translate(0,0) rotate(0);opacity:1}
  38%{transform:translateX(-50%) translate(-3%,2%) rotate(-1deg)}
  58%{transform:translateX(-50%) translate(-8%,6%) rotate(-2deg);opacity:1}
  100%{transform:translateX(-50%) translate(-32%,18%) rotate(-6deg);opacity:0}
}
@keyframes firstGrowthSnowNewRight{
  0%,20%{transform:translateX(-50%) translate(0,0) rotate(0);opacity:1}
  38%{transform:translateX(-50%) translate(3%,2%) rotate(1deg)}
  58%{transform:translateX(-50%) translate(8%,6%) rotate(2deg);opacity:1}
  100%{transform:translateX(-50%) translate(32%,18%) rotate(6deg);opacity:0}
}
@keyframes firstGrowthSprout{
  0%,8%{transform:translateX(-50%) rotate(0) translateY(0)}
  14%{transform:translateX(-50%) rotate(-4deg) translateY(-2%)}
  20%{transform:translateX(-50%) rotate(4.5deg) translateY(-1%)}
  26%{transform:translateX(-50%) rotate(-5deg) translateY(-4%)}
  32%{transform:translateX(-50%) rotate(4deg) translateY(-2%)}
  38%{transform:translateX(-50%) rotate(-3deg) translateY(-7%)}
  44%{transform:translateX(-50%) rotate(2deg) translateY(-4%)}
  51%{transform:translateX(-50%) rotate(-1.5deg) translateY(-11%)}
  58%{transform:translateX(-50%) rotate(1deg) translateY(-7%)}
  68%{transform:translateX(-50%) rotate(0) translateY(-15%);opacity:1}
  80%{transform:translateX(-50%) rotate(0) translateY(-12%);opacity:1}
  100%{transform:translateX(-50%) rotate(0) translateY(-25%);opacity:0}
}
@keyframes firstGrowthSnowBack{
  0%,18%{transform:translateX(-50%) translate(0,0) rotate(0);opacity:1}
  25%{transform:translateX(-50%) translate(0,-1.5%) rotate(-.5deg)}
  34%,44%{transform:translateX(-50%) translate(0,0) rotate(0)}
  56%{transform:translateX(-50%) translate(0,-3%) rotate(.7deg)}
  68%{transform:translateX(-50%) translate(0,0) rotate(0);opacity:1}
  82%{transform:translateX(-50%) translate(0,8%) rotate(-1deg);opacity:.7}
  100%{transform:translateX(-50%) translate(0,22%) rotate(-2deg);opacity:0}
}
@keyframes firstGrowthSnowLeft{
  0%,18%{transform:translateX(-50%) translate(0,0) rotate(0);opacity:1}
  25%{transform:translateX(-50%) translate(-1.5%,-2%) rotate(-.7deg)}
  34%,44%{transform:translateX(-50%) translate(0,0) rotate(0)}
  56%{transform:translateX(-50%) translate(-3%,-3%) rotate(-1.2deg)}
  68%{transform:translateX(-50%) translate(0,0) rotate(0);opacity:1}
  82%{transform:translateX(-50%) translate(-12%,8%) rotate(-3deg);opacity:.75}
  100%{transform:translateX(-50%) translate(-28%,24%) rotate(-6deg);opacity:0}
}
@keyframes firstGrowthSnowRight{
  0%,18%{transform:translateX(-50%) translate(0,0) rotate(0);opacity:1}
  25%{transform:translateX(-50%) translate(1.5%,-2%) rotate(.7deg)}
  34%,44%{transform:translateX(-50%) translate(0,0) rotate(0)}
  56%{transform:translateX(-50%) translate(3%,-3%) rotate(1.2deg)}
  68%{transform:translateX(-50%) translate(0,0) rotate(0);opacity:1}
  82%{transform:translateX(-50%) translate(12%,8%) rotate(3deg);opacity:.75}
  100%{transform:translateX(-50%) translate(28%,24%) rotate(6deg);opacity:0}
}
@keyframes firstGrowthSnowFront{
  0%,18%{transform:translateX(-50%) translate(0,0);opacity:1}
  25%{transform:translateX(-50%) translate(0,-1.5%)}
  34%,44%{transform:translateX(-50%) translate(0,0)}
  56%{transform:translateX(-50%) translate(0,-3%)}
  68%{transform:translateX(-50%) translate(0,0);opacity:1}
  82%{transform:translateX(-50%) translate(0,9%);opacity:.72}
  100%{transform:translateX(-50%) translate(0,26%);opacity:0}
}
.growth-snow-magic{display:none;position:absolute;left:50%;bottom:0;width:360%;height:360%;transform:translateX(-50%);z-index:5;pointer-events:none;overflow:visible}
#tree.first-growth .growth-snow-magic{display:block}
#tree.tree-growing .growth-snow-magic{display:block}
#tree.tree-growing .growth-snow-magic::before,
#tree.tree-growing .growth-snow-magic::after{
  content:"";
  position:absolute;
  left:50%;
  top:78%;
  width:46%;
  height:46%;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 18% 34%,rgba(255,255,255,.95) 0 .4%,transparent .62%),
    radial-gradient(circle at 31% 72%,rgba(235,246,255,.88) 0 .36%,transparent .56%),
    radial-gradient(circle at 48% 20%,rgba(255,255,255,.92) 0 .42%,transparent .64%),
    radial-gradient(circle at 61% 64%,rgba(238,248,255,.9) 0 .34%,transparent .54%),
    radial-gradient(circle at 77% 28%,rgba(255,255,255,.94) 0 .38%,transparent .6%),
    radial-gradient(circle at 84% 76%,rgba(232,245,255,.86) 0 .32%,transparent .52%);
}
#tree.tree-growing .growth-snow-magic::before{
  animation:treeSnowSwirlA .95s .08s ease-out both;
}
#tree.tree-growing .growth-snow-magic::after{
  width:58%;
  height:58%;
  animation:treeSnowSwirlB 1.05s .12s ease-out both;
}
#tree.tree-growing .puff-left{animation:growthPuffLeft .68s .12s ease-out both}
#tree.tree-growing .puff-center{animation:growthPuffCenter .72s .16s ease-out both}
#tree.tree-growing .puff-right{animation:growthPuffRight .68s .12s ease-out both}
#tree.tree-growing .flake-1{animation:growthFlake1 .82s .12s ease-out both}
#tree.tree-growing .flake-2{animation:growthFlake2 .78s .16s ease-out both}
#tree.tree-growing .flake-3{animation:growthFlake3 .84s .14s ease-out both}
#tree.tree-growing .flake-4{animation:growthFlake4 .8s .2s ease-out both}
#tree.tree-growing .flake-5{animation:growthFlake5 .82s .18s ease-out both}
#tree.tree-growing .flake-6{animation:growthFlake6 .78s .22s ease-out both}
#tree.tree-growing .late-snow-clump{display:none}
@keyframes treeSnowSwirlA{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-28deg) scale(.65)}
  18%{opacity:.95}
  70%{opacity:.85}
  100%{opacity:0;transform:translate(-50%,-58%) rotate(155deg) scale(1.16)}
}
@keyframes treeSnowSwirlB{
  0%{opacity:0;transform:translate(-50%,-42%) rotate(35deg) scale(.6)}
  20%{opacity:.82}
  68%{opacity:.72}
  100%{opacity:0;transform:translate(-50%,-54%) rotate(-145deg) scale(1.12)}
}
.snow-puff,.magic-flake,.late-snow-clump{position:absolute;display:block;opacity:0;pointer-events:none}
.snow-puff{left:50%;bottom:12%;width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.88) 0 18%,rgba(226,240,255,.48) 42%,rgba(255,255,255,0) 72%);filter:blur(1px)}
.puff-left{animation:growthPuffLeft 1.05s 1.02s ease-out both}
.puff-center{animation:growthPuffCenter 1.05s 1.08s ease-out both}
.puff-right{animation:growthPuffRight 1.05s 1.02s ease-out both}
.magic-flake{left:50%;bottom:18%;font-style:normal;color:rgba(245,250,255,.96);text-shadow:0 0 5px rgba(210,232,255,.8);font-size:clamp(5px,.55vw,10px)}
.flake-1{animation:growthFlake1 1.15s 1.05s ease-out both}.flake-2{animation:growthFlake2 1.05s 1.12s ease-out both}.flake-3{animation:growthFlake3 1.18s 1.08s ease-out both}
.flake-4{animation:growthFlake4 1.1s 1.18s ease-out both}.flake-5{animation:growthFlake5 1.15s 1.14s ease-out both}.flake-6{animation:growthFlake6 1.05s 1.22s ease-out both}
.late-snow-clump{left:58%;bottom:47%;width:3.5%;aspect-ratio:1;border-radius:55% 45% 58% 42%;background:rgba(248,252,255,.96);box-shadow:0 0 3px rgba(210,230,250,.7);animation:lateSnowClump .62s 2.03s cubic-bezier(.35,.05,.8,.45) both}
@keyframes growthPuffLeft{0%{opacity:0;transform:translate(-45%,0) scale(.25)}18%{opacity:.9}100%{opacity:0;transform:translate(-145%,-42%) scale(1.35)}}
@keyframes growthPuffCenter{0%{opacity:0;transform:translate(-50%,5%) scale(.2)}20%{opacity:.95}100%{opacity:0;transform:translate(-50%,-72%) scale(1.6)}}
@keyframes growthPuffRight{0%{opacity:0;transform:translate(-55%,0) scale(.25)}18%{opacity:.9}100%{opacity:0;transform:translate(45%,-42%) scale(1.35)}}
@keyframes growthFlake1{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(-520%,-900%) rotate(120deg) scale(.9)}}
@keyframes growthFlake2{0%{opacity:0;transform:translate(0,0)}20%{opacity:.9}100%{opacity:0;transform:translate(-270%,-1180%) rotate(-80deg)}}
@keyframes growthFlake3{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(390%,-1020%) rotate(150deg) scale(1.05)}}
@keyframes growthFlake4{0%{opacity:0;transform:translate(0,0)}20%{opacity:.85}100%{opacity:0;transform:translate(620%,-620%) rotate(80deg)}}
@keyframes growthFlake5{0%{opacity:0;transform:translate(0,0) scale(.55)}20%{opacity:1}100%{opacity:0;transform:translate(-650%,-520%) rotate(-140deg) scale(.9)}}
@keyframes growthFlake6{0%{opacity:0;transform:translate(0,0)}20%{opacity:.9}100%{opacity:0;transform:translate(240%,-760%) rotate(100deg)}}
@keyframes lateSnowClump{0%{opacity:0;transform:translate(0,-40%) scale(.6)}12%{opacity:1}78%{opacity:1}100%{opacity:0;transform:translate(-35%,420%) rotate(55deg) scale(.85)}}
@keyframes firstGrowthTreeOne{
  0%{opacity:0;transform:translateX(-50%) translateY(calc(-5vh + 20%)) scale(.72)}
  22%{opacity:1}
  72%{opacity:1;transform:translateX(-50%) translateY(calc(-5vh - 3%)) scale(1.035)}
  80%{transform:translateX(-50%) translateY(calc(-5vh + 1%)) scale(.985)}
  86%,100%{opacity:1;transform:translateX(-50%) translateY(-5vh) scale(1)}
}
#tree.tree-growing{transition:width 1.1s cubic-bezier(.2,.8,.22,1),bottom 1.1s cubic-bezier(.2,.8,.22,1)}
#tree.tree-growing .tree-placeholder{display:none}
#tree.tree-growing[data-grow-from="1"] .stage-one-tree,
#tree.tree-growing[data-grow-from="2"] .stage-two-tree,
#tree.tree-growing[data-grow-from="3"] .stage-three-tree,
#tree.tree-growing[data-grow-from="4"] .stage-four-tree{display:block;z-index:2;animation:treeGrowOut 1.1s ease-in-out both}
#tree.tree-growing[data-grow-to="2"] .stage-two-tree,
#tree.tree-growing[data-grow-to="3"] .stage-three-tree,
#tree.tree-growing[data-grow-to="4"] .stage-four-tree,
#tree.tree-growing[data-grow-to="5"] .stage-five-tree{display:block;z-index:3;animation:treeGrowIn .78s .3s cubic-bezier(.16,.84,.24,1) both}
@keyframes treeGrowOut{
  0%,15%{opacity:1;transform:translateX(-50%) translateY(0) rotate(0) scale(1)}
  30%{opacity:1;transform:translateX(-50%) translateY(2%) rotate(-1.4deg) scale(.97)}
  46%{opacity:1;transform:translateX(-50%) translateY(-3%) rotate(1.1deg) scale(1.025)}
  62%{opacity:.85;transform:translateX(-50%) translateY(-4%) rotate(0) scale(1.045)}
  100%{opacity:0;transform:translateX(-50%) translateY(-6%) rotate(0) scale(1.07)}
}
@keyframes treeGrowIn{
  0%{opacity:0;transform:translateX(-50%) translateY(7%) scale(.9)}
  20%{opacity:1}
  68%{opacity:1;transform:translateX(-50%) translateY(-2.5%) scale(1.045)}
  84%{transform:translateX(-50%) translateY(1%) scale(.99)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
.tree-special-decor{position:absolute;inset:0;z-index:2;pointer-events:none}
.tree-motion{position:absolute;z-index:1;pointer-events:none;transform-origin:50% 100%}
.tree-motion-left{left:8%;bottom:25%}.tree-motion-right{right:8%;bottom:34%}
body:not(.editing) .tree-motion-left{animation:treeBreatheLeft 8.5s ease-in-out infinite alternate}
body:not(.editing) .tree-motion-right{animation:treeBreatheRight 10.5s ease-in-out infinite alternate}
@keyframes treeBreatheLeft{from{transform:rotate(-.18deg) translateX(0)}to{transform:rotate(.18deg) translateX(1px)}}
@keyframes treeBreatheRight{from{transform:rotate(.15deg) translateX(0)}to{transform:rotate(-.15deg) translateX(-1px)}}
.editing .tree-motion{animation-play-state:paused!important}
#tree-special-layer{position:absolute;inset:0;z-index:11;pointer-events:none}
#branch-layer{position:absolute;inset:0;z-index:15;pointer-events:none}
.falling-branch{position:absolute;top:-110px;width:96px;height:96px;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;animation:branchFall var(--fall-duration) linear forwards;filter:drop-shadow(0 5px 5px rgb(0 0 0/.25))}
.falling-branch>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.branch-catch-puff{position:absolute;width:0;height:0;z-index:16;pointer-events:none}
.branch-catch-puff>i{position:absolute;left:0;top:0;width:var(--puff-size);height:var(--puff-size);border-radius:50%;background:rgb(255 255 255/.92);box-shadow:0 0 3px rgb(218 239 255/.75);transform:translate(-50%,-50%);animation:branchCatchPuff .58s ease-out forwards}
@keyframes branchCatchPuff{
  0%{transform:translate(-50%,-50%) rotate(var(--puff-angle)) translateX(0) scale(.7);opacity:0}
  18%{opacity:1}
  100%{transform:translate(-50%,-50%) rotate(var(--puff-angle)) translateX(var(--puff-distance)) scale(.85);opacity:0}
}
.falling-branch:hover{transform:scale(1.15)}.falling-branch.caught{opacity:0;transform:scale(1.5);transition:.18s}.falling-branch.missed{opacity:0;transition:.18s}
@keyframes branchFall{from{top:-70px;rotate:-12deg}to{top:105%;rotate:55deg}}
#tools{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:grid;gap:10px;z-index:20}
.friend{border:1px solid rgb(255 255 255/.65);background:rgb(24 50 91/.78);color:white;cursor:pointer}
#tools button{
  width:52px;
  height:52px;
  padding:0;
  border:1px solid #deefffa6;
  border-radius:14px;
  appearance:none;
  background:var(--elka-glass-surface);
  color:white;
  box-shadow:var(--elka-glass-rim);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  font-size:24px;
  cursor:pointer;
  transition:filter .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
body:not(.branch-round-active) #tools button:hover,
body:not(.branch-round-active) #tools button:focus-visible{
  border-color:#efffff;
  filter:brightness(1.1);
  box-shadow:
    inset 0 0 10px #fff9,
    inset 0 -5px 10px #7898e333,
    0 0 5px #effaffdd,
    0 0 16px #a9d8ffb8,
    0 0 28px #aebaff66,
    0 7px 18px #10255355;
}
#tools button:focus-visible{outline:2px solid #efffff;outline-offset:3px}
#tools button[data-tooltip]{position:relative}
#tools button[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  z-index:40;
  transform:translate(5px,-50%);
  padding:8px 12px;
  border:1px solid #dceeff99;
  border-radius:11px;
  background:linear-gradient(145deg,#7891d7e8,#243a82f2);
  color:#f7faff;
  box-shadow:inset 0 0 8px #e8f1ff52,0 0 5px #effaff80,0 0 15px #8babff66,0 6px 18px #10255352;
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  font:600 13px/1.2 system-ui,sans-serif;
  white-space:nowrap;
  text-shadow:0 1px 3px #10255380;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
}
#tools button[data-tooltip]::before{
  content:"";
  position:absolute;
  right:calc(100% + 8px);
  top:50%;
  z-index:41;
  width:8px;
  height:8px;
  transform:translateY(-50%) rotate(45deg);
  background:#344c94;
  border-top:1px solid #dceeff80;
  border-right:1px solid #dceeff80;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .14s ease,visibility .14s ease;
}
#tools button[data-tooltip]:hover::after,
#tools button[data-tooltip]:hover::before,
#tools button[data-tooltip]:focus-visible::after,
#tools button[data-tooltip]:focus-visible::before{
  opacity:1;
  visibility:visible;
}
#tools button[data-tooltip]:hover::after,
#tools button[data-tooltip]:focus-visible::after{
  transform:translate(0,-50%);
}
#tools .tool-icon{display:block;width:42px;height:42px;margin:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 4px rgb(8 23 70/.32))}
#wheel-open .tool-icon{transform:translate(-1px,0)}
#storage-open .tool-icon{transform:translate(0,0)}
#edit-open .tool-icon{transform:translate(-2px,0)}
#sound-toggle .tool-icon{transform:translate(-3px,-2px)}
#settings-open .tool-icon{transform:translate(-2px,0)}
#tools .tool-icon-settings{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#friends{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);z-index:20}.friend{width:50px;height:50px;border-radius:50%;font-weight:800}


.branch-start {
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .22);
}

.branch-start:hover {
  transform: translateY(-1px);
}

#round-status {
  font-weight: 800;
}


/* Hide the empty round-status shell while no round/button/countdown is shown. */
#round-status:empty {
  display: none;
}

/* Main gift wheel presentation is defined in wheel.css. */
.modal[hidden]{display:none}.modal{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:rgb(3 12 31/.68)}
.modal-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:30px;cursor:pointer;color:#183354}
.wheel-sector-toy-win{animation:wheelToyWinBounce .62s cubic-bezier(.2,.8,.3,1) both}
@keyframes wheelToyWinBounce{
  0%{transform:translateY(0) scale(1)}
  32%{transform:translateY(-10px) scale(1.055)}
  58%{transform:translateY(1px) scale(.995)}
  78%{transform:translateY(-3px) scale(1.015)}
  100%{transform:translateY(0) scale(1)}
}
.wheel-sector-reroll-win{animation:wheelRerollWin .68s cubic-bezier(.2,.75,.25,1) both}
@keyframes wheelRerollWin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.wheel-sector-x2-win{animation:wheelX2Win .62s cubic-bezier(.2,.8,.3,1) both}
@keyframes wheelX2Win{
  0%{transform:scale(1)}
  42%{transform:scale(1.24)}
  68%{transform:scale(1.16)}
  100%{transform:scale(1)}
}

.wheel-reset{position:absolute;left:14px;top:14px;border:1px dashed #8d6e63;border-radius:8px;background:transparent;color:#72584f;padding:5px 8px;font-size:11px;cursor:pointer}


.wheel-test-date{display:block;margin:0 0 2px;font-size:11px;opacity:.7}.wheel-test-date input{margin-left:5px}

.wheel-prize{position:absolute;inset:70px 35px 35px;z-index:4;display:grid;place-content:center;gap:24px;border-radius:20px;background:#f7f0df}.wheel-prize[hidden]{display:none}.wheel-prize-toy{font-size:72px;font-weight:900}.wheel-prize-actions{display:flex;justify-content:center;gap:12px}.wheel-prize-actions button{border:0;border-radius:999px;padding:12px 20px;font:inherit;font-weight:800;cursor:pointer}.wheel-prize-actions button:disabled{opacity:.4;cursor:default}

.storage-card{position:relative;width:min(620px,80vw);min-height:360px;padding:28px;border-radius:24px;background:#f7f0df;color:#183354;box-shadow:0 24px 80px rgb(0 0 0/.4)}.storage-card h2{text-align:center;margin-top:0}.storage-items{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:28px}.storage-item{position:relative;display:grid;place-items:center;min-height:105px;border-radius:16px;background:#fff8e9;box-shadow:0 4px 12px rgb(0 0 0/.12)}.storage-toy{font-size:28px;font-weight:900}.storage-count{position:absolute;right:8px;bottom:7px;font-size:13px;font-weight:900}.storage-empty{text-align:center;margin-top:110px;opacity:.55;font-weight:700}.storage-empty[hidden]{display:none}

.storage-card{
  display:flex;flex-direction:column;width:min(820px,88vw);height:700px;min-height:700px
}
.storage-card>h2,.storage-tabs{flex:0 0 auto}
.storage-tabs{display:flex;justify-content:center;gap:6px;border-bottom:2px solid #d9c8a7;margin:8px 0 20px;padding-bottom:8px}
.storage-tab{border:0;border-radius:10px 10px 0 0;padding:9px 16px;background:transparent;color:#5c6d7e;font:inherit;font-weight:800;cursor:pointer}
.storage-tab.active{background:#e7d7b9;color:#183354}
.storage-content{
  flex:1 1 auto;min-height:0;overflow:visible
}
.collection-shelves{display:grid;gap:18px}
.collection-shelf{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:8px 12px 18px;border-bottom:12px solid #9a6a42;box-shadow:0 7px 0 #68462f}
.collection-toy{position:relative;display:grid;place-items:center;height:92px;border-radius:14px;background:#fff8e9}
.collection-toy-name{font-size:28px;font-weight:900}.collection-toy.missing{filter:grayscale(1);opacity:.24}
.collection-count{position:absolute;right:8px;bottom:7px;font-size:13px;font-weight:900}
.collection-actions{position:absolute;inset:0;display:none;place-content:center;gap:5px;border-radius:14px;background:rgb(24 51 84/.88)}
.collection-toy.owned:hover .collection-actions{display:grid}.collection-actions button{border:0;border-radius:999px;padding:6px 12px;font-size:11px;font-weight:800;cursor:pointer}
.trade-mine,.trade-market,.trade-history{padding:10px 14px;border-radius:16px;background:#fff8e9;margin-bottom:10px}.trade-mine h3,.trade-market h3,.trade-history h3{margin:0 0 9px}
.trade-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.trade-section-heading h3{margin:0}
.trade-market-nav{display:flex;align-items:center;gap:6px;min-height:28px}
.trade-market-nav:empty{display:none}
.trade-market-nav button{
  display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid #c7b99f;border-radius:50%;
  background:#fff;color:#183354;font:800 15px/1 system-ui;cursor:pointer;
  box-shadow:0 2px 6px #47391f1f
}
.trade-market-nav button:hover:not(:disabled){background:#eef3ff;border-color:#aabbd8}
.trade-market-nav button:disabled{opacity:.3;cursor:default}
.trade-composer{display:flex;align-items:center;gap:10px;padding:10px;border:1px dashed #aa8b68;border-radius:12px}.trade-composer[hidden]{display:none}
.trade-empty,.storage-placeholder{text-align:center;padding:70px 20px;opacity:.55;font-weight:700}.storage-placeholder small{font-weight:500}

.collection-reserved{position:absolute;left:7px;bottom:7px;font-size:10px;font-weight:800;opacity:.65}
.trade-my-list,.trade-friend-list,.trade-history-list{display:grid;gap:8px}
.trade-row{display:grid;grid-template-columns:42px 92px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:66px;padding:9px 10px;border-radius:12px;background:white}
.trade-row.mine{background:#f3e6cf}
.trade-history{margin-bottom:0}
.trade-history-list{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px
}
.trade-history-row{
  position:relative;display:grid;grid-template-rows:auto auto;align-content:center;gap:7px;
  min-width:0;min-height:102px;padding:9px;border:1px solid transparent;border-radius:12px;background:white;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease
}

.trade-history-person{
  display:flex;align-items:center;gap:6px;min-width:0
}
.trade-history-person .trade-avatar{
  flex:0 0 28px;width:28px;height:28px;font-size:12px
}
.trade-history-person>strong{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px
}
.trade-history-exchange{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.trade-history-exchange .trade-toy{
  flex:0 0 40px;width:40px;height:40px;border-radius:10px
}
.trade-history-exchange .trade-toy img{width:37px;height:37px}
.trade-history-arrow{color:#71809a;font-size:17px;font-weight:800}

.trade-avatar{
  display:grid;place-items:center;width:38px;height:38px;overflow:hidden;border-radius:50%;
  background:linear-gradient(145deg,#eaf1ff,#9db4ec);color:#203675;font:800 16px/1 system-ui;
  box-shadow:inset 0 0 5px #fff9,0 2px 7px #243d7333
}
.trade-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.trade-exchange{display:flex;align-items:center;gap:7px;min-width:0}
.trade-exchange>span:not(.trade-toy){opacity:.62}
.trade-toy{
  display:inline-grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:12px;
  background:linear-gradient(145deg,#f8faff,#dbe6ff);box-shadow:inset 0 0 7px #fff,0 2px 7px #334f8426
}
.trade-toy img{display:block;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 3px #273b7040)}
.trade-toy-code{font:800 12px/1 system-ui;color:#203675}
.trade-composer{flex-wrap:wrap;overflow:visible}
.trade-composer-give{display:flex;align-items:center;gap:8px}
.trade-toy-placeholder{
  display:grid;place-items:center;width:48px;height:48px;border:1px dashed #b8a07b;border-radius:12px;
  background:#fff;color:#8a765b;font:800 18px/1 system-ui
}
.trade-picker{position:relative;z-index:5;min-width:210px}
.trade-composer .trade-picker-trigger{
  display:flex;align-items:center;gap:9px;width:100%;min-height:58px;padding:5px 10px 5px 7px;
  border:1px solid #c9b28e;border-radius:14px;background:#fff;color:#183354;
  box-shadow:inset 0 1px 0 #fff,0 3px 10px #354d7621;text-align:left
}
.trade-composer .trade-picker-trigger:hover{background:#fffdf8;filter:none}
.trade-picker-trigger .trade-toy{flex:0 0 46px;width:46px;height:46px}
.trade-picker-trigger .trade-toy img{width:42px;height:42px}
.trade-picker-label{flex:1;white-space:nowrap;font-size:13px;font-weight:800}
.trade-picker-chevron{margin-left:auto;font-size:18px;line-height:1;opacity:.55;transform:translateY(-2px)}
.trade-picker-trigger[aria-expanded="true"] .trade-picker-chevron{transform:translateY(2px) rotate(180deg)}
.trade-picker-menu{
  position:absolute;left:0;top:calc(100% + 7px);z-index:30;
  display:block;width:max-content;min-width:244px;max-height:320px;overflow-y:auto;
  padding:10px;border:1px solid #c9b28e;border-radius:16px;background:#fffaf0;
  box-shadow:0 16px 34px #21375b38,0 4px 12px #21375b24
}
.trade-picker-menu[hidden]{display:none}
.trade-picker-group+.trade-picker-group{
  margin-top:10px;padding-top:10px;border-top:1px solid #ddcfb7
}
.trade-picker-group-title{
  margin:0 3px 7px;color:#6e604d;font:800 11px/1.2 system-ui;text-transform:uppercase;letter-spacing:.045em
}
.trade-picker-group.missing .trade-picker-group-title{color:#71809a}
.trade-picker-grid{display:grid;grid-template-columns:repeat(3,72px);gap:7px}
.trade-composer .trade-picker-option{
  position:relative;display:grid;grid-template-rows:50px auto;place-items:center;gap:3px;width:72px;min-height:72px;padding:6px 4px;
  border:1px solid transparent;border-radius:12px;background:transparent;color:#183354;
  box-shadow:none;font-size:11px;font-weight:800
}
.trade-composer .trade-picker-option.missing{
  border-color:#c9d7ed73;
  background:linear-gradient(145deg,#edf3ff80,#dfe9fb52);
  color:#5c6d88
}
.trade-composer .trade-picker-option.missing .trade-toy{opacity:.8;filter:saturate(.78)}
.trade-composer .trade-picker-option:hover{
  background:#eaf0ff;border-color:#c8d7f3;filter:none;box-shadow:none
}
.trade-composer .trade-picker-option.missing:hover{
  background:#e6efff;border-color:#aac1e6;color:#183354
}
.trade-composer .trade-picker-option.selected{
  background:#dce8ff;border-color:#9eb9ec;color:#183354;box-shadow:inset 0 0 0 1px #fff8
}
.trade-picker-option .trade-toy{width:48px;height:48px;flex-basis:48px}
.trade-picker-option .trade-toy img{width:44px;height:44px}
.trade-picker-code{line-height:1}
.trade-picker-count{
  position:absolute;top:4px;right:4px;display:grid;place-items:center;min-width:20px;height:17px;padding:0 4px;
  border-radius:999px;background:#274d91;color:#fff;font:800 9px/17px system-ui;
  box-shadow:0 1px 4px #18335442
}
.trade-row button,.trade-composer button{border:0;border-radius:999px;padding:8px 12px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;background:#183354;color:white}
.trade-row button:disabled,.trade-composer button:disabled{opacity:.25;cursor:default}
.trade-empty.compact{padding:18px 10px}

/* Compact three-slot trade composer. */
.trade-my-list{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.trade-offer-card{
  position:relative;z-index:1;display:grid;grid-template-rows:1fr auto;gap:10px;
  min-width:0;min-height:126px;padding:12px;border:1px solid #e4d5ba;border-radius:14px;
  background:#fff;box-shadow:inset 0 1px 0 #fff,0 2px 8px #6e56311a;
  overflow:visible
}
.trade-offer-card.published{background:#f3e6cf}
.trade-offer-card.has-draft{border-color:#c7b18d;background:#fffdf8}
.trade-offer-card:has(.trade-picker-menu:not([hidden])){z-index:40}
.trade-card-exchange{
  display:flex;align-items:center;justify-content:center;gap:9px;min-width:0
}
.trade-card-exchange>.trade-toy{
  flex:0 0 62px;width:62px;height:62px
}
.trade-card-exchange>.trade-toy img{width:56px;height:56px}
.trade-card-arrow{
  flex:0 0 auto;color:#71809a;font-size:22px;font-weight:800
}
.trade-slot-picker{position:relative;z-index:5;flex:0 0 62px}
.trade-slot-trigger{
  display:grid;place-items:center;width:62px;height:62px;padding:0;
  border:1px dashed #b9a17d;border-radius:13px;background:#fff;color:#7b6b54;
  box-shadow:inset 0 1px 0 #fff,0 2px 7px #354d761c;cursor:pointer
}
.trade-slot-trigger:hover:not(:disabled){
  border-color:#8fa9d4;background:#f4f7ff
}
.trade-slot-trigger:disabled{cursor:default;opacity:.55}
.trade-slot-trigger .trade-toy{
  width:58px;height:58px;flex-basis:58px;border-radius:11px
}
.trade-slot-trigger .trade-toy img{width:54px;height:54px}
.trade-slot-plus{
  display:block;font:400 34px/1 system-ui;color:#8a785e;transform:translateY(-1px)
}
.trade-slot-action{
  width:100%;min-height:34px;border:0;border-radius:999px;padding:7px 10px;
  background:#183354;color:#fff;font:800 12px/1 system-ui;cursor:pointer
}
.trade-slot-action:disabled{
  background:#c8ced6;color:#fff;cursor:default;opacity:.78
}
.trade-slot-picker .trade-picker-menu{
  top:calc(100% + 7px);z-index:60
}
.trade-slot-picker.give .trade-picker-menu{left:0;right:auto}
.trade-slot-picker.want .trade-picker-menu{left:auto;right:0}
.trade-slot-picker .trade-picker-option{
  position:relative;display:grid;grid-template-rows:50px;place-items:center;
  width:72px;min-height:62px;padding:6px 4px;border:1px solid transparent;
  border-radius:12px;background:transparent;color:#183354;box-shadow:none;
  font-size:11px;font-weight:800
}
.trade-slot-picker .trade-picker-option.missing{
  border-color:#c9d7ed73;background:linear-gradient(145deg,#edf3ff80,#dfe9fb52);color:#5c6d88
}
.trade-slot-picker .trade-picker-option.missing .trade-toy{opacity:.8;filter:saturate(.78)}
.trade-slot-picker .trade-picker-option:hover{
  background:#eaf0ff;border-color:#c8d7f3;filter:none;box-shadow:none
}
.trade-slot-picker .trade-picker-option.missing:hover{
  background:#e6efff;border-color:#aac1e6;color:#183354
}
.trade-slot-picker .trade-picker-option.selected{
  background:#dce8ff;border-color:#9eb9ec;color:#183354;box-shadow:inset 0 0 0 1px #fff8
}
.trade-picker-empty{
  min-width:210px;padding:16px 12px;text-align:center;color:#7c6d58;font-size:12px;font-weight:700
}

/* Friend offers: two larger cards per page. */
.trade-friend-list{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px
}
.trade-market .trade-row.friend-offer{
  grid-template-columns:38px minmax(0,1fr) auto;
  grid-template-areas:"avatar exchange action";
  min-height:62px;padding:9px 10px;gap:9px
}
.trade-market .trade-friend-avatar-wrap{
  position:relative;grid-area:avatar;display:grid;place-items:center;width:38px;height:38px
}
.trade-market .trade-friend-avatar-wrap .trade-avatar{
  width:38px;height:38px;font-size:15px
}
.trade-market .trade-friend-avatar-wrap::after{
  content:attr(data-name);
  position:absolute;left:50%;bottom:calc(100% + 8px);z-index:20;
  transform:translate(-50%,4px);max-width:180px;padding:6px 9px;border-radius:8px;
  background:#183354;color:#fff;font:700 11px/1.15 system-ui;white-space:nowrap;
  box-shadow:0 5px 14px #10253f42;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .14s ease,transform .14s ease,visibility .14s
}
.trade-market .trade-friend-avatar-wrap::before{
  content:"";position:absolute;left:50%;bottom:calc(100% + 3px);z-index:21;
  width:8px;height:8px;background:#183354;transform:translateX(-50%) rotate(45deg);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .14s ease,visibility .14s
}
.trade-market .trade-friend-avatar-wrap:hover::after,
.trade-market .trade-friend-avatar-wrap:hover::before,
.trade-market .trade-friend-avatar-wrap:focus-visible::after,
.trade-market .trade-friend-avatar-wrap:focus-visible::before{
  opacity:1;visibility:visible
}
.trade-market .trade-friend-avatar-wrap:hover::after,
.trade-market .trade-friend-avatar-wrap:focus-visible::after{
  transform:translate(-50%,0)
}
.trade-market .friend-offer .trade-exchange{
  grid-area:exchange;justify-content:center;gap:6px
}
.trade-market .friend-offer .trade-exchange .trade-toy{
  flex:0 0 42px;width:42px;height:42px;border-radius:10px
}
.trade-market .friend-offer .trade-exchange .trade-toy img{width:39px;height:39px}
.trade-market .friend-offer .trade-card-arrow{font-size:17px}
.trade-market .friend-offer>button{
  grid-area:action;width:auto;padding:8px 11px;font-size:11px;white-space:nowrap
}

@media(max-width:760px){
  .trade-my-list,.trade-friend-list{grid-template-columns:1fr}
  .trade-history-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

#decor-layer{position:absolute;inset:0;z-index:12;pointer-events:none}
.free-decor-layer{isolation:isolate}
.placed-decor{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fff8e9;border:3px solid white;color:#183354;font-weight:900;box-shadow:0 5px 15px rgb(0 0 0/.28);pointer-events:auto;user-select:none}
.editing #snow{display:none}
.editing .falling-branch{animation-play-state:paused!important}
.editing #branch-layer,.editing #branch-timer,.editing #round-status{visibility:hidden}
.editing .placed-decor{cursor:grab;outline:none}
/* Editing controls: soft blue glass, independent of decorative PNG overlays. */
#edit-ui{position:absolute;inset:0;z-index:35;pointer-events:none;color:#f7faff;font-family:system-ui,sans-serif}
#edit-ui[hidden]{display:none}
.editing #new-year-counter{
  z-index:36;top:24px;left:28px;min-width:0;height:54px;padding:0 24px;
  display:flex;align-items:center;gap:6px;border:1px solid #d7e4ffb3;border-radius:999px;
  background:linear-gradient(155deg,#a0b2ff50,#283b9580 48%,#162b7270);
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:inset 0 0 9px #d6e4ff66,0 0 5px #dfedff99,0 0 16px #7b9dff66,0 7px 18px #08174644;
  color:#f7faff;font-size:18px;font-weight:700;text-shadow:0 2px 4px #12235e66;
}
.editing #new-year-counter::before{content:none}
#edit-actions{position:absolute;top:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;pointer-events:auto}
#edit-actions button{
  display:flex;align-items:center;justify-content:center;padding:0;gap:13px;
  height:62px;border:1px solid #e1edffb3;border-radius:50%;color:#fff;cursor:pointer;
  box-shadow:var(--elka-control-glow);
  transition:filter .16s ease,box-shadow .16s ease,transform .16s ease;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
#edit-actions button:hover{filter:brightness(1.14);box-shadow:var(--elka-control-hover)}
#edit-actions button:active{transform:translateY(1px)}
#edit-save,#edit-cancel{width:62px}
#edit-save{background:var(--elka-positive-surface)}
#edit-cancel{background:var(--elka-negative-surface)}
#edit-actions .edit-clear{height:54px;width:210px;border-radius:999px;background:var(--elka-control-surface);font:700 18px/1 system-ui}
#edit-actions svg{display:block;width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:3.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #20367655)}
#edit-actions .edit-clear svg{width:25px;height:25px;stroke-width:2}
#edit-actions .edit-clear-box-icon{display:block;width:46px;height:46px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 2px 4px #20367666)}

/* Anchored to the actual bottom of the game, not a scaled reference canvas. */
#edit-reference-stage{position:absolute;left:24px;right:24px;bottom:8px;pointer-events:none;transition:transform .28s cubic-bezier(.22,.8,.25,1)}
#edit-jumps{
  position:relative;z-index:2;display:flex;width:526px;height:48px;margin:0 0 7px;padding:7px;gap:7px;overflow:visible;
  border:1px solid #dceaff99;border-radius:999px;pointer-events:auto;
  background:linear-gradient(155deg,#b4c2ff66,#5265bf80 46%,#2d408b99);
  backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:inset 0 0 7px #e4eeff66,0 0 5px #dfefff99,0 0 15px #8db9ff80,0 4px 12px #1e307544;
}
#edit-jumps button{position:relative;flex:1;min-width:0;border:1px solid #e1edffb3;border-radius:999px;background:var(--elka-control-surface);color:#f8faff;font:700 15px/1 system-ui;cursor:pointer;text-shadow:0 1px 3px #152c7766;transition:filter .16s,box-shadow .16s,transform .16s}
#edit-jumps button.active{background:linear-gradient(160deg,#f1f1ffed,#b9c5facc);color:#203675;text-shadow:none;box-shadow:inset 0 0 7px #fff9,0 0 8px #d3e5ff99}
#edit-jumps button:hover:not(:disabled):not(.active){background:#d8e5ff26}
#edit-jumps button:disabled{opacity:.42;cursor:default}
#edit-dock{
  position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:8px;
  height:104px;transition:opacity .24s,visibility .28s;padding:0 12px;border:1px solid #dceeffa6;border-radius:27px;pointer-events:auto;
  background:var(--elka-glass-surface);
  backdrop-filter:blur(18px) saturate(1.35) brightness(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.35) brightness(1.08);
  box-shadow:var(--elka-glass-rim);
}
#edit-bar{display:flex;align-items:center;gap:12px;height:102px;min-width:0;overflow-x:auto;overflow-y:hidden;padding:10px 9px;scroll-padding-inline:9px;scrollbar-width:none;overscroll-behavior-x:contain}
#edit-bar::-webkit-scrollbar{display:none}
.edit-bar-item{
  position:relative;flex:0 0 78px;width:78px;height:82px;display:grid;grid-template-rows:54px 16px;justify-items:center;align-content:center;gap:3px;
  padding:4px 8px;border:1px solid transparent;border-radius:18px;
  background:var(--elka-soft-cell);
  box-shadow:inset 0 0 10px #e7efff33,0 3px 9px #475a9726;
  color:#203776;cursor:grab;user-select:none;transition:background .15s,box-shadow .15s;
}
.edit-bar-item:hover{background-color:#e5efff26;box-shadow:inset 0 0 12px #edf5ff59,0 3px 10px #475a9733}
.edit-bar-toy-image{display:block;width:54px;height:54px;max-width:54px;max-height:54px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 3px #273b7059)}
.edit-bar-count{display:block;height:16px;min-width:26px;padding:1px 5px;border-radius:8px;background:#e4edff59;color:#243974;font:700 12px/14px system-ui;font-variant-numeric:tabular-nums;text-align:center;pointer-events:none}
.edit-bar-item.highlighted{border-color:#efffffcc;background-color:#e8f4ff26;box-shadow:inset 0 0 9px #e2ffff99,0 0 4px #efffff,0 0 10px #b3eaffcc,0 0 19px #80baff80}
.edit-arrow{display:grid;place-items:center;width:36px;height:36px;padding:0;justify-self:center;border:1px solid #d0dfff33;border-radius:50%;background:linear-gradient(155deg,#adbcfa59,#4d68cc66);color:#f5faff;box-shadow:inset 0 0 6px #d8e6ff26,0 2px 7px #324c8526;cursor:pointer;transition:background .15s,box-shadow .15s}
.edit-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.edit-arrow:hover:not(:disabled){background-color:#d4e6ff33;box-shadow:0 0 9px #c1e6ff99}
.edit-arrow:disabled{opacity:.32;cursor:default}
.edit-bar-empty{margin:auto;color:#e8efff;font-size:14px;text-align:center}
#edit-ui button:focus-visible,.edit-bar-item:focus-visible{outline:2px solid #efffff;outline-offset:3px}
/* Shared luminous edge: the same layered glow as the clear button. */
#edit-jumps button,.edit-arrow{
  box-shadow:var(--elka-control-glow);
}
#edit-jumps button.active{border-color:#f1f8ff;box-shadow:inset 0 0 8px #fff9,0 0 5px #effaffcc,0 0 16px #8babff80}
#edit-jumps button:hover:not(:disabled),.edit-arrow:hover:not(:disabled){
  filter:brightness(1.14);box-shadow:var(--elka-control-hover);
}
#edit-jumps .edit-round{flex:0 0 32px;width:32px;height:32px;padding:0;display:grid;place-items:center;border-radius:50%}
#edit-info span{font:700 20px/1 Georgia,serif}
#edit-collapse svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s}
#edit-reference-stage.collapsed{transform:translateY(111px)}
#edit-reference-stage.collapsed #edit-dock{opacity:0;visibility:hidden;pointer-events:none}
#edit-reference-stage.collapsed #edit-collapse svg{transform:rotate(180deg)}
#edit-tooltip{
  position:absolute;left:0;bottom:calc(100% + 13px);padding:14px 18px;white-space:nowrap;
  border:1px solid #e1edffb3;border-radius:17px;color:#f7faff;font:500 14px/1.4 system-ui;
  background:linear-gradient(145deg,#7e97ddcc,#253b84e6);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 0 9px #e8f1ff66,0 0 5px #effaffa6,0 0 18px #8babff80,0 7px 20px #10255366;
  pointer-events:auto;
}
#edit-tooltip[hidden]{display:none}
#edit-tooltip::after{content:"";position:absolute;left:19px;bottom:-5px;width:8px;height:8px;transform:rotate(45deg);background:#344c94;border-right:1px solid #dceaff99;border-bottom:1px solid #dceaff99}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#edit-dock{background:linear-gradient(130deg,#b9cafaeb,#8fa7ddeb)} }
@media(max-width:1100px){#edit-actions{left:auto;right:24px;transform:none;gap:12px}#edit-reference-stage{left:14px;right:14px}.editing #new-year-counter{left:20px;font-size:16px}}
@media(prefers-reduced-motion:reduce){#edit-ui *{scroll-behavior:auto;transition:none}}

.edit-confirm-modal{z-index:70;background:rgb(5 14 39/.58);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.edit-confirm-card{
  position:relative;overflow:hidden;width:min(500px,84vw);padding:34px 38px 32px;text-align:center;
  border:1px solid #dceeffa6;border-radius:28px;
  background:var(--elka-glass-surface);color:#f6f9ff;
  backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35);
  box-shadow:var(--elka-glass-rim),0 24px 70px #06133180
}
.edit-confirm-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#ffffff2e,transparent 28%,transparent 70%,#5f7ed51a);
  border-radius:inherit
}
.edit-confirm-card h3{position:relative;margin:0 0 10px;color:#fff;font:800 27px/1.2 system-ui;text-shadow:0 2px 7px #17347b73}
.edit-confirm-card p{position:relative;margin:0 0 28px;color:#e6edff;font:500 17px/1.4 system-ui;text-shadow:0 1px 4px #17347b55}
.edit-confirm-actions{position:relative;display:flex;justify-content:center;gap:14px}
.edit-confirm-card button{
  min-width:150px;height:48px;padding:0 22px;border:1px solid #e1edffb3;border-radius:999px;
  color:#fff;font:800 16px/1 system-ui;cursor:pointer;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--elka-control-glow);
  transition:filter .16s ease,box-shadow .16s ease,transform .16s ease
}
.edit-confirm-card button:hover{filter:brightness(1.12);box-shadow:var(--elka-control-hover)}
.edit-confirm-card button:active{transform:translateY(1px)}
.edit-confirm-card button:focus-visible{outline:2px solid #efffff;outline-offset:3px}
#clear-decor-confirm{background:var(--elka-negative-surface)}
#clear-decor-cancel{background:var(--elka-control-surface)}

.collection-count.in-box{color:#278a50}
.collection-placed{position:absolute;right:7px;top:7px;font-size:10px;font-weight:900;color:#c54d55}
.collection-toy.all-placed{opacity:.58}
.collection-toy.all-placed:hover{opacity:1}

/* hidden must beat layout rules such as #tools { display:grid } */
#tools[hidden],#friends[hidden]{display:none!important}


/* Final 4 → 5 celebration: confetti shoots from the meadow toward the viewer. */
.final-confetti-burst{
  position:absolute;
  inset:0;
  z-index:34;
  pointer-events:none;
  overflow:visible;
}
.final-confetti{
  position:absolute;
  left:var(--confetti-origin-x);
  top:var(--confetti-origin-y);
  display:block;
  opacity:0;
  transform-origin:center;
  will-change:transform,opacity;
  animation:finalConfettiFlight var(--confetti-duration) cubic-bezier(.16,.75,.22,1) var(--confetti-delay) forwards;
}
.final-confetti--dot{
  width:var(--confetti-size);
  height:var(--confetti-size);
  margin:calc(var(--confetti-size) / -2);
  border-radius:50%;
  background:var(--confetti-color);
  box-shadow:0 0 5px rgb(255 244 194/.48);
}
.final-confetti--ribbon{
  width:calc(var(--confetti-size) * .48);
  height:calc(var(--confetti-size) * 2.8);
  margin-left:calc(var(--confetti-size) * -.24);
  margin-top:calc(var(--confetti-size) * -1.4);
  border-radius:999px;
  background:linear-gradient(180deg,rgb(255 255 255/.88) 0 14%,var(--confetti-color) 15% 100%);
  box-shadow:0 0 4px rgb(255 244 194/.32);
}
.final-confetti--spiral{
  width:calc(var(--confetti-size) * 2.4);
  height:calc(var(--confetti-size) * 2.4);
  margin-left:calc(var(--confetti-size) * -1.2);
  margin-top:calc(var(--confetti-size) * -1.2);
}
.final-confetti--spiral::before,
.final-confetti--spiral::after{
  content:"";
  position:absolute;
  border:2px solid var(--confetti-color);
  border-radius:50%;
  box-sizing:border-box;
}
.final-confetti--spiral::before{
  inset:0;
  border-left-color:transparent;
  border-bottom-color:transparent;
  transform:rotate(25deg);
}
.final-confetti--spiral::after{
  inset:27%;
  border-right-color:transparent;
  border-bottom-color:transparent;
  transform:rotate(-35deg);
}
@keyframes finalConfettiFlight{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) translate(0,0) scale(.12) rotate(0deg);
  }
  8%{opacity:1}
  58%{opacity:1}
  100%{
    opacity:0;
    transform:translate(-50%,-50%) translate(var(--confetti-x),var(--confetti-y)) scale(1.48) rotate(var(--confetti-rotate));
  }
}

@media (prefers-reduced-motion:reduce){.flake{animation:none}}


/* Real artwork for collection set A. */
.collection-toy-image{display:block;width:min(92px,7vw);height:min(92px,7vw);object-fit:contain;margin:0 auto;filter:drop-shadow(0 4px 5px rgb(0 0 0/.2))}
.collection-toy.missing .collection-toy-image{filter:grayscale(1) brightness(.42) opacity(.42)}
.collection-toy-code{display:grid;place-items:center;min-height:min(92px,7vw)}


/* Five fixed decoration sizes in edit mode. */
.placed-decor{width:var(--decor-size,54px);height:var(--decor-size,54px);background:transparent;border:0;border-radius:0;box-shadow:none}
.placed-decor>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 5px rgb(0 0 0/.28))}
.placed-decor>span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#fff8e9;border:3px solid white;box-shadow:0 5px 15px rgb(0 0 0/.28)}
.decor-size-controls{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,34px);align-items:center;gap:4px;padding:3px 5px;border-radius:999px;background:rgb(24 50 91/.94);box-shadow:0 3px 10px rgb(0 0 0/.28);white-space:nowrap;z-index:2}
.editing .placed-decor.selected{z-index:100}
.editing .placed-decor.selected .decor-size-controls{display:flex;z-index:101}
.decor-size-controls button{width:24px;height:24px;padding:0;border:1px solid rgb(255 255 255/.65);border-radius:50%;background:white;color:#183354;font:700 17px/1 system-ui;cursor:pointer}
.decor-size-controls span{min-width:25px;color:white;font-size:10px;font-weight:800;text-align:center}


/* Collection A: slow pendulum swing from the ornament hanger. */
body:not(.editing) .placed-decor.collection-a-pendulum>img{
  transform-origin:50% 4%;
  animation:collectionAPendulum 12s ease-in-out 3.2s infinite;
}
@keyframes collectionAPendulum{
  0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.7,1)}
  3.26%{transform:rotate(-8deg);animation-timing-function:cubic-bezier(.35,0,.65,1)}
  8.48%{transform:rotate(5deg);animation-timing-function:cubic-bezier(.35,0,.65,1)}
  11.48%{transform:rotate(-2deg);animation-timing-function:cubic-bezier(.35,0,.65,1)}
  13.04%{transform:rotate(0deg)}
  100%{transform:rotate(0deg)}
}
.editing .placed-decor.collection-a-pendulum>img{transform:none;animation:none}


/* Collection B test: a gentle vertical spring every 3 seconds. */
body:not(.editing) .placed-decor.collection-b-spring>img{
  animation:collectionBSpring 12s ease-in-out 3s infinite;
}
@keyframes collectionBSpring{
  0%,100%{transform:translateY(0);animation-timing-function:cubic-bezier(.45,0,.7,1)}
  2.571%{transform:translateY(3px);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  2.871%{transform:translateY(3px);animation-timing-function:cubic-bezier(.35,0,.65,1)}
  4.775%{transform:translateY(-1.5px);animation-timing-function:cubic-bezier(.35,0,.65,1)}
  6.375%{transform:translateY(.7px);animation-timing-function:cubic-bezier(.35,0,.65,1)}
  7.775%{transform:translateY(-.25px);animation-timing-function:cubic-bezier(.35,0,.65,1)}
  8.975%,100%{transform:translateY(0)}
}
.editing .placed-decor.collection-b-spring>img{transform:none;animation:none}


/* Collection C: masked diagonal glint with staggered sparkles every 12 seconds. */
.placed-decor.collection-c-shine{overflow:visible}
.decor-shine,.decor-sparkle{display:none;pointer-events:none}
body:not(.editing) .collection-c-shine .decor-shine{
  display:block;position:absolute;inset:0;
  background:linear-gradient(122deg,transparent 30%,rgba(255,248,214,.18) 42%,rgba(255,255,255,.82) 50%,rgba(255,248,214,.18) 58%,transparent 70%);
  background-size:350% 350%;background-position:100% 100%;
  -webkit-mask-image:var(--decor-mask);mask-image:var(--decor-mask);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:collectionCShine 12s ease-in-out 1.9s infinite;
}
body:not(.editing) .collection-c-shine .decor-sparkle{
  display:block;position:absolute;color:rgba(255,250,220,.96);
  font:700 9px/1 serif;text-shadow:0 0 4px rgba(255,255,255,.9),0 0 7px rgba(255,225,150,.55);
  opacity:0;transform:translate(-50%,-50%) scale(.25);
  animation:collectionCSparkle 12s ease-out 1.9s infinite;
}
body:not(.editing) .collection-c-shine .decor-sparkle-1{left:calc(50% + 4px);top:45%;font-size:12.6px;animation-name:collectionCSparkleSlow;animation-duration:12s;animation-delay:1.9s}
body:not(.editing) .collection-c-shine .decor-sparkle-2{left:calc(56% + 4px);top:55%;animation-name:collectionCSparkleSlow;animation-duration:12s;animation-delay:2.18s}
body:not(.editing) .collection-c-shine .decor-sparkle-3{display:none}
@keyframes collectionCShine{
  0%,5%{opacity:0;background-position:100% 100%}
  8%{opacity:.25}
  20%{opacity:.9}
  31%{opacity:.55}
  38%{opacity:0;background-position:0 0}
  100%{opacity:0;background-position:0 0}
}
@keyframes collectionCSparkle{
  0%,17%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  21%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
  27%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
}
@keyframes collectionCSparkleSlow{
  0%,17%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  25%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
  37%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
}
.editing .collection-c-shine .decor-shine,.editing .collection-c-shine .decor-sparkle{display:none}


/* Temporary server auth gate. Kept separate from the meadow so it can be redesigned later. */
#auth-gate{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(7,27,60,.88);
  backdrop-filter:blur(8px);
  color:#183354;
}
.auth-card{
  width:min(420px,92vw);
  padding:30px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  background:#f7f0df;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.auth-card h1{margin:0 0 8px;text-align:center;font-size:34px}
.auth-lead,.auth-hint{margin:0 0 20px;text-align:center}
.auth-hint{opacity:.7}
#auth-form{display:grid;gap:14px}
#auth-form label{display:grid;gap:6px;font-size:13px;font-weight:800}
#auth-form small{font-weight:500;opacity:.65}
#auth-form input{
  width:100%;
  padding:11px 12px;
  border:1px solid #c9b28e;
  border-radius:11px;
  background:white;
  color:#183354;
  font:inherit;
}
#auth-form button{
  margin-top:4px;
  padding:11px 16px;
  border:0;
  border-radius:999px;
  background:#183354;
  color:white;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
#auth-form button:disabled{opacity:.55;cursor:wait}
.auth-error{
  min-height:18px;
  margin:0;
  color:#a7353e;
  font-size:12px;
  font-weight:800;
  text-align:center;
}


/* Friend meadow navigation — frosted glass dock. */
#friends{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid #dceeff80;
  border-radius:999px;
  background:var(--elka-glass-surface);
  box-shadow:
    inset 0 0 12px #e1eeff4d,
    inset 0 -3px 8px #91acf133,
    0 0 4px #e6f6ff99,
    0 0 14px #a7ceff73,
    0 8px 22px #14295940;
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
}
#friends .friend{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:visible;
  padding:0;
  border:1px solid #e5f2ff99;
  background:
    radial-gradient(circle at 34% 24%,#eef7ff52,transparent 46%),
    linear-gradient(155deg,#8299d666,#304c9180);
  color:#f8fbff;
  box-shadow:
    inset 0 0 7px #edf6ff4d,
    inset 0 -4px 8px #17336b40,
    0 2px 8px #10255340;
  text-shadow:0 2px 4px #10255b80;
  font:800 16px/1 system-ui,sans-serif;
  transition:
    transform .16s ease,
    filter .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}
#friends .friend:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  border-color:#f1fbffcc;
  box-shadow:
    inset 0 0 8px #fff7,
    0 0 5px #effaffcc,
    0 0 14px #9ec4ff80,
    0 5px 12px #1025534d;
}
#friends .friend:focus-visible{
  outline:2px solid #efffff;
  outline-offset:3px;
}
#friends .friend img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}
#friends .friend.active{
  border-color:#f4ffff;
  background-color:#e8f4ff38;
  box-shadow:
    inset 0 0 10px #e8ffffb3,
    0 0 5px #f4ffff,
    0 0 12px #c5efffff,
    0 0 24px #9dd6ffff,
    0 0 38px #6faeffb3;
}
#friends .friend[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 11px);
  z-index:35;
  transform:translate(-50%,5px);
  padding:7px 11px;
  border:1px solid #dceeff80;
  border-radius:10px;
  background:
    radial-gradient(ellipse at 18% 8%,#edf5ff38,transparent 48%),
    linear-gradient(145deg,#7386c0cc,#344d8be6);
  color:#f8fbff;
  box-shadow:
    inset 0 0 8px #e8f1ff38,
    0 0 4px #effaff80,
    0 8px 20px #10255359;
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  font:700 12px/1.2 system-ui,sans-serif;
  letter-spacing:.01em;
  text-shadow:0 1px 3px #10255b66;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
}
#friends .friend[data-tooltip]::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 7px);
  z-index:34;
  width:8px;
  height:8px;
  transform:translateX(-50%) rotate(45deg);
  border-right:1px solid #dceeff73;
  border-bottom:1px solid #dceeff73;
  background:#455d99e6;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .14s ease,visibility .14s ease;
}
#friends .friend[data-tooltip]:hover::after,
#friends .friend[data-tooltip]:hover::before,
#friends .friend[data-tooltip]:focus-visible::after,
#friends .friend[data-tooltip]:focus-visible::before{
  opacity:1;
  visibility:visible;
}
#friends .friend[data-tooltip]:hover::after,
#friends .friend[data-tooltip]:focus-visible::after{
  transform:translate(-50%,0);
}
#visit-banner{
  position:absolute;
  top:20px;
  right:20px;
  z-index:25;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:999px;
  background:rgba(24,50,91,.82);
  color:white;
  font-size:13px;
  font-weight:800;
}
#visit-banner[hidden]{display:none}
body.visiting-friend #tools,
body.visiting-friend #branch-timer,
body.visiting-friend #round-status,
body.visiting-friend #branch-layer,
body.visiting-friend #edit-ui{
  display:none!important;
}


/* Temporary account/profile modal. */
.profile-card{
  position:relative;
  width:min(430px,90vw);
  padding:28px;
  border-radius:24px;
  background:#f7f0df;
  color:#183354;
  box-shadow:0 24px 80px rgba(0,0,0,.4);
}
.profile-card h2{
  margin:0 0 20px;
  text-align:center;
}
.profile-avatar-wrap{
  display:grid;
  justify-items:center;
  gap:10px;
  margin-bottom:20px;
}
.profile-avatar-preview{
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:#183354;
  color:white;
  font-size:34px;
  font-weight:900;
  border:3px solid white;
  box-shadow:0 5px 18px rgba(0,0,0,.22);
}
.profile-avatar-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.profile-avatar-change{
  position:relative;
  padding:7px 12px;
  border-radius:999px;
  background:#e7d7b9;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.profile-avatar-change input{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  opacity:0;
  pointer-events:none;
}
#profile-form{
  display:grid;
  gap:14px;
}
#profile-form>label{
  display:grid;
  gap:6px;
  font-size:13px;
  font-weight:800;
}
#profile-form small{
  font-weight:500;
  opacity:.65;
}
#profile-form input{
  width:100%;
  padding:11px 12px;
  border:1px solid #c9b28e;
  border-radius:11px;
  background:white;
  color:#183354;
  font:inherit;
}
.profile-error{
  min-height:18px;
  margin:0;
  color:#a7353e;
  font-size:12px;
  font-weight:800;
  text-align:center;
}
.profile-actions{
  display:flex;
  gap:10px;
}
.profile-actions button{
  flex:1;
  border:0;
  border-radius:999px;
  padding:11px 14px;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
#profile-save{
  background:#183354;
  color:white;
}
#profile-logout{
  background:#e8d6d8;
  color:#8f2f38;
}
.profile-actions button:disabled{
  opacity:.55;
  cursor:wait;
}


/* Admin invite controls inside the temporary profile modal. */
.profile-admin{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid #d9c8a7;
}
.profile-admin h3{
  margin:0 0 6px;
  text-align:center;
}
.profile-admin>p{
  margin:0 0 12px;
  text-align:center;
  font-size:12px;
  opacity:.72;
}
#admin-create-invite,
#admin-copy-invite{
  border:0;
  border-radius:999px;
  padding:10px 14px;
  background:#183354;
  color:white;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
#admin-create-invite{
  display:block;
  width:100%;
}
#admin-create-invite:disabled{
  opacity:.55;
  cursor:wait;
}
.admin-invite-result{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-top:10px;
}
.admin-invite-result[hidden]{
  display:none;
}
#admin-invite-url{
  min-width:0;
  padding:9px 10px;
  border:1px solid #c9b28e;
  border-radius:10px;
  background:white;
  color:#183354;
  font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.admin-invite-status{
  min-height:18px;
  margin:8px 0 0!important;
  font-size:11px!important;
}


#wheel-modal .wheel-prize{
  position:absolute;
  z-index:4;
  border:1px solid #dceeffb3;
  background:
    radial-gradient(ellipse at 20% 8%,#eef6ff47,transparent 38%),
    linear-gradient(140deg,#aebeffd9,#5368bfd9 48%,#253b85ed);
  color:#f8fbff;
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:
    inset 0 0 14px #e7f1ff66,
    0 0 5px #effaffb3,
    0 0 20px #8babff80,
    0 14px 32px #10255366;
}
#wheel-modal .wheel-prize-actions button{
  border:1px solid #e1edffb3;
  background:var(--elka-control-surface);
  color:#f8faff;
  text-shadow:0 1px 3px #152c7766;
  box-shadow:inset 0 0 8px #e8f1ff80,inset 0 -5px 10px #15295433,0 0 4px #effaffb3,0 0 13px #8babff73,0 5px 13px #10255344;
  transition:filter .16s ease,box-shadow .16s ease,transform .16s ease;
}
#wheel-modal .wheel-prize-actions button:hover:not(:disabled){
  filter:brightness(1.14);
  box-shadow:inset 0 0 10px #fff9,0 0 6px #f3ffff,0 0 19px #a9c8ff99,0 5px 14px #10255355;
}
#wheel-modal .wheel-prize-actions button:active:not(:disabled){transform:translateY(1px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #wheel-modal .wheel-prize{background:linear-gradient(140deg,#8da2e5f2,#4057a9f2)}
}


#wheel-modal .wheel-prize{inset:115px 50px 70px}



.wheel-sector.wheel-sector-win-glow::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:94px;
  height:94px;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.45);
  background:radial-gradient(circle,rgba(255,255,244,.72) 0 8%,rgba(194,231,255,.38) 24%,rgba(132,176,255,.20) 48%,transparent 72%);
  filter:blur(1px);
  opacity:0;
  z-index:0;
  animation:wheelSectorWinGlow .86s cubic-bezier(.18,.8,.25,1) both;
}
@keyframes wheelSectorWinGlow{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.42)}
  22%{opacity:1}
  56%{opacity:.86;transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.28)}
}

@media(prefers-reduced-motion:reduce){
  .wheel-sector.wheel-sector-win-glow::before{
    animation:none!important;
  }
}




/* Prize toy spark burst. */
.wheel-win-sparks{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  pointer-events:none;
  z-index:5;
}
.wheel-win-spark{
  --dx:0px;
  --dy:-26px;
  --delay:0s;
  position:absolute;
  left:-2px;
  top:-2px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff7cf;
  opacity:0;
  box-shadow:
    0 0 4px rgba(255,255,235,.98),
    0 0 9px rgba(255,211,98,.78),
    0 0 15px rgba(151,205,255,.34);
  animation:wheelWinSparkBurst .72s ease-out var(--delay) forwards;
}
.wheel-win-spark::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:9px;
  transform:translate(-50%,-50%) rotate(35deg);
  background:linear-gradient(transparent,rgba(255,245,200,.95),transparent);
}
.wheel-win-spark:nth-child(1){--dx:-31px;--dy:-23px;--delay:.00s}
.wheel-win-spark:nth-child(2){--dx:-17px;--dy:-34px;--delay:.03s}
.wheel-win-spark:nth-child(3){--dx:0px;--dy:-39px;--delay:.01s}
.wheel-win-spark:nth-child(4){--dx:18px;--dy:-33px;--delay:.05s}
.wheel-win-spark:nth-child(5){--dx:32px;--dy:-21px;--delay:.02s}
.wheel-win-spark:nth-child(6){--dx:38px;--dy:-4px;--delay:.07s}
.wheel-win-spark:nth-child(7){--dx:31px;--dy:17px;--delay:.04s}
.wheel-win-spark:nth-child(8){--dx:15px;--dy:29px;--delay:.08s}
.wheel-win-spark:nth-child(9){--dx:-5px;--dy:31px;--delay:.06s}
.wheel-win-spark:nth-child(10){--dx:-24px;--dy:24px;--delay:.09s}
.wheel-win-spark:nth-child(11){--dx:-37px;--dy:8px;--delay:.04s}
.wheel-win-spark:nth-child(12){--dx:-38px;--dy:-9px;--delay:.07s}
@keyframes wheelWinSparkBurst{
  0%{
    opacity:0;
    transform:translate(0,0) scale(.2);
  }
  13%{
    opacity:1;
    transform:translate(0,0) scale(1);
  }
  42%{opacity:.94}
  100%{
    opacity:0;
    transform:translate(var(--dx),var(--dy)) scale(.24);
  }
}
@media(prefers-reduced-motion:reduce){
  .wheel-win-spark{animation:none!important}
}




/* Wheel prize toy artwork. */
#wheel-modal .wheel-prize-title{
  color:#f8fbff;
  font:700 26px/1.1 Georgia,serif;
  text-align:center;
  text-shadow:0 2px 5px #16275f99,0 0 10px #b9dbff55;
}
#wheel-modal .wheel-prize-toy{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-top:8px;
}
#wheel-modal .wheel-prize-toy-wrap{
  position:relative;
  display:block;
  width:180px;
  height:180px;
  flex:0 0 180px;
}
#wheel-modal .wheel-prize-toy-image{
  position:relative;
  z-index:1;
  display:block;
  width:180px;
  height:180px;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 8px 12px rgba(16,37,83,.26));
  animation:wheelPrizeGlow 4.8s ease-in-out infinite;
}
#wheel-modal .wheel-prize-glint{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    112deg,
    transparent 38%,
    rgba(255,248,215,.10) 43%,
    rgba(255,244,190,.92) 48%,
    rgba(255,210,92,.28) 52%,
    transparent 57%
  );
  background-size:280% 100%;
  background-position:120% 0;
  -webkit-mask:var(--prize-image) center/contain no-repeat;
  mask:var(--prize-image) center/contain no-repeat;
  mix-blend-mode:screen;
  opacity:0;
  animation:wheelPrizeGlint 5.6s ease-in-out infinite;
}
#wheel-modal .wheel-prize-sparks{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
#wheel-modal .wheel-prize-sparks i{
  --spark-x:0px;
  --spark-y:-8px;
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff9dc;
  opacity:0;
  box-shadow:
    0 0 3px rgba(255,255,235,.96),
    0 0 8px rgba(255,205,91,.76),
    0 0 13px rgba(154,200,255,.34);
  animation:wheelPrizeSpark 4.9s ease-out infinite;
}
#wheel-modal .wheel-prize-sparks i::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:9px;
  transform:translate(-50%,-50%) rotate(35deg);
  background:linear-gradient(transparent,rgba(255,248,215,.95),transparent);
}
#wheel-modal .wheel-prize-sparks i:nth-child(1){left:18%;top:22%;--spark-x:-7px;--spark-y:-7px;animation-delay:.2s}
#wheel-modal .wheel-prize-sparks i:nth-child(2){left:80%;top:18%;--spark-x:8px;--spark-y:-8px;animation-delay:1.1s}
#wheel-modal .wheel-prize-sparks i:nth-child(3){left:92%;top:51%;--spark-x:10px;--spark-y:0px;animation-delay:2.0s}
#wheel-modal .wheel-prize-sparks i:nth-child(4){left:70%;top:87%;--spark-x:6px;--spark-y:9px;animation-delay:3.0s}
#wheel-modal .wheel-prize-sparks i:nth-child(5){left:14%;top:76%;--spark-x:-8px;--spark-y:7px;animation-delay:3.9s}
#wheel-modal .wheel-prize-sparks i:nth-child(6){left:42%;top:10%;--spark-x:-1px;--spark-y:-10px;animation-delay:2.7s}
@keyframes wheelPrizeGlow{
  0%,100%{filter:drop-shadow(0 8px 12px rgba(16,37,83,.26)) drop-shadow(0 0 0 rgba(255,225,126,0))}
  50%{filter:drop-shadow(0 8px 12px rgba(16,37,83,.26)) drop-shadow(0 0 9px rgba(255,225,126,.34))}
}
@keyframes wheelPrizeGlint{
  0%,70%,100%{opacity:0;background-position:120% 0}
  76%{opacity:.9}
  88%{opacity:.72;background-position:-20% 0}
  92%{opacity:0;background-position:-35% 0}
}
@keyframes wheelPrizeSpark{
  0%,7%,100%{opacity:0;transform:translate(0,0) scale(.35)}
  8%{opacity:.98;transform:translate(0,0) scale(1)}
  12%{opacity:.82}
  18%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.2)}
}
@media(prefers-reduced-motion:reduce){
  #wheel-modal .wheel-prize-toy-image,
  #wheel-modal .wheel-prize-glint,
  #wheel-modal .wheel-prize-sparks i{animation:none!important}
}
#wheel-modal .wheel-prize-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin-top:34px;
}
#wheel-modal .wheel-prize-actions button{
  min-width:180px;
}


/* Hide the wheel popup while the prize popup is open. */
#wheel-modal .wheel-card:has(.wheel-prize:not([hidden])){
  border-color:transparent;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
#wheel-modal .wheel-card:has(.wheel-prize:not([hidden]))::before{
  display:none;
}
#wheel-modal .wheel-card:has(.wheel-prize:not([hidden])) > *:not(.wheel-prize){
  visibility:hidden;
}


/* Desync glints and sparks when two prizes are shown. */
#wheel-modal .wheel-prize-toy-wrap:nth-child(1) .wheel-prize-toy-image{
  animation-delay:0s;
  animation-duration:4.8s;
}
#wheel-modal .wheel-prize-toy-wrap:nth-child(2) .wheel-prize-toy-image{
  animation-delay:1.15s;
  animation-duration:5.6s;
}
#wheel-modal .wheel-prize-toy-wrap:nth-child(1) .wheel-prize-glint{
  animation-delay:.2s;
  animation-duration:5.1s;
}
#wheel-modal .wheel-prize-toy-wrap:nth-child(2) .wheel-prize-glint{
  animation-delay:2.1s;
  animation-duration:6.2s;
}
#wheel-modal .wheel-prize-toy-wrap:nth-child(1) .wheel-prize-sparks i:nth-child(1){animation-delay:.15s}
#wheel-modal .wheel-prize-toy-wrap:nth-child(1) .wheel-prize-sparks i:nth-child(2){animation-delay:1s}
#wheel-modal .wheel-prize-toy-wrap:nth-child(1) .wheel-prize-sparks i:nth-child(3){animation-delay:1.9s}
#wheel-modal .wheel-prize-toy-wrap:nth-child(1) .wheel-prize-sparks i:nth-child(4){animation-delay:2.8s}
#wheel-modal .wheel-prize-toy-wrap:nth-child(1) .wheel-prize-sparks i:nth-child(5){animation-delay:3.7s}
#wheel-modal .wheel-prize-toy-wrap:nth-child(1) .wheel-prize-sparks i:nth-child(6){animation-delay:4.5s}
#wheel-modal .wheel-prize-toy-wrap:nth-child(2) .wheel-prize-sparks i:nth-child(1){animation-delay:.85s}
#wheel-modal .wheel-prize-toy-wrap:nth-child(2) .wheel-prize-sparks i:nth-child(2){animation-delay:1.75s}
#wheel-modal .wheel-prize-toy-wrap:nth-child(2) .wheel-prize-sparks i:nth-child(3){animation-delay:2.65s}
#wheel-modal .wheel-prize-toy-wrap:nth-child(2) .wheel-prize-sparks i:nth-child(4){animation-delay:3.55s}
#wheel-modal .wheel-prize-toy-wrap:nth-child(2) .wheel-prize-sparks i:nth-child(5){animation-delay:4.45s}
#wheel-modal .wheel-prize-toy-wrap:nth-child(2) .wheel-prize-sparks i:nth-child(6){animation-delay:5.25s}


/* Development-only wheel controls, kept outside the seasonal popup. */
.wheel-dev-controls{
  position:fixed;
  left:14px;
  top:14px;
  z-index:1200;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;
  background:rgba(20,32,62,.72);
  box-shadow:0 4px 14px rgba(0,0,0,.2);
  backdrop-filter:blur(6px);
}
.wheel-dev-controls[hidden]{
  display:none;
}
.wheel-dev-label{
  font-size:11px;
  font-weight:700;
  opacity:.82;
}
.wheel-dev-controls .wheel-test-date{
  display:block;
  margin:0;
  line-height:1;
}
.wheel-dev-controls .wheel-test-date input{
  width:118px;
  height:28px;
  margin:0;
  padding:2px 6px;
  border-radius:8px;
  font-size:11px;
}
.wheel-dev-controls .wheel-reset{
  position:static;
  width:auto;
  height:28px;
  padding:0 9px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}

.trade-notice{
  margin:0 16px 12px;
  padding:9px 12px;
  border-radius:10px;
  background:#edf3ff;
  color:#304b78;
  font-size:12px;
  font-weight:700;
  text-align:center;
}

/* Box uses the same glass surfaces and luminous controls as the editor. */
#storage-modal{background:#07132a66;padding:22px}
#storage-modal .storage-card{
  width:min(820px,calc(100vw - 48px));height:min(700px,calc(100dvh - 44px));min-height:0;
  padding:26px 24px 22px;border:1px solid #dceeffa6;border-radius:27px;
  background:var(--elka-glass-surface);color:#f4f7ff;
  backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);
  box-shadow:var(--elka-glass-rim),0 22px 70px #06133166;
}
#storage-modal h2{margin:0 58px 22px;font:700 25px/1.3 system-ui;text-shadow:0 2px 8px #20366c55}
#storage-modal .storage-tabs{
  display:flex;gap:9px;margin:0 4px 20px;padding:7px;border:1px solid #dceaff80;border-radius:999px;
  background:var(--elka-control-surface);box-shadow:inset 0 0 8px #e8f1ff55,0 0 12px #8babff66;
}
#storage-modal .storage-tab{flex:1;padding:10px 8px;border:1px solid #e1edffb3;border-radius:999px;background:var(--elka-control-surface);color:#f8faff;font:700 14px/1 system-ui;box-shadow:var(--elka-control-glow)}
#storage-modal .storage-tab.active{background:linear-gradient(160deg,#f1f1ffed,#b9c5facc);color:#203675;text-shadow:none;border-color:#f1f8ff}
#storage-modal .storage-content{overflow:auto;padding:5px 8px 14px;scrollbar-width:thin;scrollbar-color:#c8dbff80 transparent;scrollbar-gutter:stable}
#storage-modal .modal-close{right:22px;top:20px;width:36px;height:36px;padding:0;display:grid;place-items:center;border:1px solid #e1edffb3;border-radius:50%;background:var(--elka-control-surface);color:#f8faff;box-shadow:var(--elka-control-glow)}
#storage-modal .modal-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
#storage-modal button{transition:filter .16s,box-shadow .16s,background .16s}
#storage-modal button:hover:not(:disabled){filter:brightness(1.12)}
#storage-modal :is(.storage-tab,.modal-close,.trade-slot-action,.collection-actions button,.trade-row>button,.trade-market-nav button):hover:not(:disabled){box-shadow:var(--elka-control-hover)}
#storage-modal button:focus-visible{outline:2px solid #efffff;outline-offset:3px}
#storage-modal button:disabled{opacity:.4;cursor:default}
#storage-modal .storage-content[data-tab="collection"]{display:flex;flex-direction:column;overflow:hidden;scrollbar-gutter:auto;padding:0 8px 8px}
#storage-modal .collection-grid{display:grid;flex:1;min-height:0;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}
#storage-modal .collection-cell{position:relative;display:grid;grid-template-rows:minmax(0,1fr) 20px;min-height:0;min-width:0;padding:9px 10px 6px;border:1px solid transparent;border-radius:18px;background:var(--elka-soft-cell);box-shadow:inset 0 0 12px #edf5ff26;color:#f3f7ff;cursor:pointer}
#storage-modal .collection-image-wrap{position:relative;display:block;grid-row:1 / -1;min-height:0;width:100%;height:100%}
#storage-modal .collection-toy-image{position:absolute;inset:0;margin:auto;width:100%;height:100%;max-width:116px;max-height:116px;object-fit:contain;filter:drop-shadow(0 4px 3px #14295366)}
#storage-modal .collection-front .collection-total{position:absolute;right:10px;bottom:7px}
#storage-modal .collection-cell.selected{border-color:#e7fbff;box-shadow:inset 0 0 9px #d9f6ff66,0 0 5px #e5fcff,0 0 16px #a0d9ff99}
#storage-modal .collection-cell:hover{background-color:#dcecff1a}
#storage-modal .collection-cell.missing{background:radial-gradient(ellipse at 50% 35%,#22396b99,#516c9733);border-color:#c1d6f226}
#storage-modal .collection-cell.missing img{filter:grayscale(1) brightness(1.15) drop-shadow(0 0 2px #e3f3ff55);opacity:.67}
#storage-modal .collection-total{justify-self:end;align-self:center;padding:1px 6px;border-radius:7px;background:#21386766;font:600 12px/1.4 system-ui;font-variant-numeric:tabular-nums}
#storage-modal .collection-unopened{align-self:center;color:#d0def4;font:500 10px/1.2 system-ui}
#storage-modal :is(.trade-mine,.trade-market,.trade-history){padding:14px;border:1px solid #e0ecff33;border-radius:18px;background:#b6c7f81a;box-shadow:inset 0 0 10px #e7efff19;margin-bottom:14px}
#storage-modal h3{color:#f4f7ff;font:700 15px/1.4 system-ui}
#storage-modal h3>span{font-size:12px;font-weight:500;color:#dce8ff}
#storage-modal :is(.trade-offer-card,.trade-row,.trade-history-row){background:var(--elka-soft-cell);border:1px solid #e0ecff33;box-shadow:inset 0 0 10px #e7efff26,0 3px 9px #263d6f19;color:#f3f7ff;border-radius:16px}
#storage-modal :is(.trade-offer-card.published,.trade-offer-card.has-draft){border-color:#d9f1ff99;box-shadow:inset 0 0 9px #e2ffff33,0 0 10px #b3eaff40}
#storage-modal :is(.trade-toy,.trade-avatar,.trade-slot-trigger){background:var(--elka-soft-cell);border-color:#d8e6ff66;color:#eff5ff;box-shadow:inset 0 0 8px #e7efff33,0 3px 9px #263d6f26}
#storage-modal :is(.trade-card-arrow,.trade-history-arrow,.trade-slot-plus){color:#e6f1ff}
#storage-modal :is(.trade-slot-action,.trade-row>button,.trade-market-nav button){border:1px solid #e1edff99;background:var(--elka-control-surface);color:#f8faff;box-shadow:var(--elka-control-glow);border-radius:999px}
#storage-modal .trade-picker-menu{max-height:260px;border-color:#dceaff99;background:linear-gradient(145deg,#718dcefa,#304a8cf5);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--elka-glass-rim),0 12px 30px #06133166}
#storage-modal .trade-picker-group+.trade-picker-group{border-color:#d8e6ff40}
#storage-modal :is(.trade-picker-group-title,.trade-picker-group.missing .trade-picker-group-title,.trade-picker-empty){color:#edf4ff}
#storage-modal .trade-picker-option{background:var(--elka-soft-cell);border:1px solid #e0ecff33;color:#f3f7ff;box-shadow:none;border-radius:14px}
#storage-modal .trade-picker-option.missing{background:#c5d4fa1a;border-color:#e0ecff26;color:#d7e5ff}
#storage-modal .trade-picker-option:hover,#storage-modal .trade-picker-option.selected{background:#d7eaff40;border-color:#efffffcc;box-shadow:0 0 10px #b3eaff99}
#storage-modal .trade-picker-count{background:#e4edff99;color:#203675}
#storage-modal .trade-notice{border:1px solid #daeaff59;border-radius:13px;background:#b6c7f826;padding:10px 14px;margin-bottom:12px;color:#f1f6ff;font-size:13px}
#storage-modal .trade-empty{padding:20px 12px;opacity:1;color:#e3edff;font-size:13px;font-weight:500}
#storage-modal .storage-placeholder{display:grid;place-content:center;gap:12px;min-height:360px;padding:30px;opacity:1;color:#f4f7ff;font:700 20px/1.4 system-ui}
#storage-modal .storage-placeholder small{color:#d8e6ff;font:400 14px/1.5 system-ui}
@media(max-height:650px){#storage-modal .storage-card{padding:16px 20px}#storage-modal h2{margin-bottom:12px}#storage-modal .storage-tabs{margin-bottom:12px}#storage-modal .storage-placeholder{min-height:220px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#storage-modal .storage-card{background:linear-gradient(130deg,#7b94c9f5,#3e568cf5)}}

#storage-modal :is(.trade-my-list,.trade-friend-list,.trade-history-list)>.trade-empty{grid-column:1 / -1}

/* Box reuses editor glass and action colors. */
#storage-modal .storage-tab{box-shadow:inset 0 0 8px #e8f1ff33}
#storage-modal .storage-tab.active{background:linear-gradient(160deg,#f1f1ffed,#b9c5facc);color:#203675;box-shadow:var(--elka-control-glow)}
#storage-modal :is(.trade-slot-publish,.trade-row>button:not(:disabled)){background:var(--elka-positive-surface)}
#storage-modal :is(.trade-mine,.trade-market,.trade-history){background:none;box-shadow:none;border:0;border-radius:0;padding:12px 0;margin:0}
#storage-modal :is(.trade-market,.trade-history){border-top:1px solid #d6e8ff33}
#storage-modal :is(.trade-my-list,.trade-friend-list,.trade-history-list){grid-template-columns:1fr;gap:0}
#storage-modal :is(.trade-offer-card,.trade-row,.trade-history-row){display:grid;grid-template-rows:auto;grid-template-columns:minmax(0,1fr) auto;min-height:60px;padding:7px 10px;gap:12px;background:none;border:0;border-radius:10px;box-shadow:none}
#storage-modal .trade-offer-card.empty:has(.trade-create){min-height:38px;padding:3px 10px}
#storage-modal .trade-card-exchange{justify-content:flex-start}
#storage-modal :is(.trade-card-exchange>.trade-toy,.trade-slot-trigger){width:48px;height:48px;flex-basis:48px}
#storage-modal .trade-slot-picker{flex-basis:48px}
#storage-modal :is(.trade-card-exchange>.trade-toy img,.trade-slot-trigger .trade-toy img){width:44px;height:44px}
#storage-modal .trade-slot-trigger .trade-toy{width:46px;height:46px}
#storage-modal .trade-slot-action{width:auto;align-self:center;min-width:126px;box-shadow:inset 0 0 6px #e8f1ff33}
#storage-modal :is(.trade-slot-cancel,.trade-create,.trade-history-toggle){border:0;background:transparent;color:#e4edff;box-shadow:none;font:500 12px/1.4 system-ui;cursor:pointer;text-align:left;padding:7px 0}
#storage-modal .trade-slot-cancel:hover{box-shadow:none;text-decoration:underline}
#storage-modal .trade-cancel-confirm{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px;font:500 12px/1.4 system-ui;background:#19356359;border-radius:12px}
#storage-modal .trade-cancel-confirm button{padding:8px 12px;border:1px solid #dceaff80;border-radius:999px;color:#fff;background:var(--elka-control-surface);cursor:pointer}
#storage-modal .trade-cancel-confirm .trade-confirm-cancel{background:var(--elka-negative-surface)}
#storage-modal .trade-row{grid-template-columns:minmax(120px,1fr) 150px 185px;border-bottom:1px solid #d6e8ff19;border-radius:0}
#storage-modal .trade-friend-avatar-wrap{width:auto;height:auto;display:flex;align-items:center;gap:10px;min-width:0}
#storage-modal .trade-friend-avatar-wrap::after,#storage-modal .trade-friend-avatar-wrap::before{display:none}
#storage-modal .trade-friend-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12px/1.4 system-ui}
#storage-modal .trade-avatar{flex-shrink:0}
#storage-modal .trade-row>button{justify-self:end;box-shadow:inset 0 0 6px #e8f1ff33}
#storage-modal .trade-row>button:disabled{background:none;box-shadow:none;border:0;opacity:.8;font-weight:400;padding:0}
#storage-modal .trade-history-row{grid-template-columns:minmax(120px,1fr) 150px 185px;min-height:48px;border-bottom:1px solid #d6e8ff19;border-radius:0}
#storage-modal .trade-history-exchange{justify-content:flex-start}
#storage-modal .trade-history-date{justify-self:end;color:#d0def4;font:400 11px/1.3 system-ui}
#storage-modal .trade-history-new-dot{top:50%;right:0;width:5px;height:5px;box-shadow:none;background:#c6ebff}
#storage-modal .trade-empty{text-align:left;padding:14px 10px;font-weight:400;color:#dce7fc}
#storage-modal .trade-history-toggle{justify-self:start;margin-top:8px}
@media(max-height:650px){#storage-modal .collection-grid{gap:8px}#storage-modal .collection-cell{padding:5px 7px 3px;border-radius:13px}}

#storage-modal .trade-offer-card.published,#storage-modal .trade-offer-card.has-draft{box-shadow:none;border-color:transparent;background:none}
#storage-modal .trade-slot-action.trade-slot-cancel{box-shadow:none;background:none;border:0;border-radius:0;font-weight:400}
#storage-modal :is(.trade-offer-card,.trade-row,.trade-history-row){box-sizing:border-box}
#storage-modal .trade-history-row{padding-top:3px;padding-bottom:3px}

/* Two faces share the toolbar's soft glass cell. */
#storage-modal .collection-cell{display:block;padding:0;border:0;background:none;box-shadow:none;perspective:900px;cursor:default}
#storage-modal .collection-cell:hover,#storage-modal .collection-cell.missing{background:none;border:0}
#storage-modal .collection-flipper{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .32s ease}
#storage-modal .collection-cell.flipped .collection-flipper{transform:rotateY(180deg)}
#storage-modal :is(.collection-front,.collection-back){position:absolute;inset:0;box-sizing:border-box;border:1px solid #e0ecff26;border-radius:18px;background:var(--elka-soft-cell);box-shadow:inset 0 0 12px #edf5ff26;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:#f3f7ff;padding:9px 10px 6px}
#storage-modal .collection-front{display:grid;grid-template-rows:minmax(0,1fr) 20px;cursor:pointer;width:100%;height:100%;font:inherit;transition:border-color .65s ease,box-shadow .65s ease}
#storage-modal .collection-cell.missing .collection-front{background:radial-gradient(ellipse at 50% 35%,#22396b99,#516c9733)}
#storage-modal .collection-back{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;gap:8px;background:var(--elka-glass-surface);border-color:#dceeff80;box-shadow:inset 0 0 12px #e1eeff40,0 0 8px #a7ceff40}
#storage-modal .collection-copy-info{display:grid;gap:2px;font:400 11px/1.3 system-ui}
#storage-modal .collection-copy-info span{display:flex;justify-content:space-between;gap:5px}
#storage-modal .collection-back-actions{display:grid;gap:4px}
#storage-modal .collection-back-actions button{padding:5px 6px;border:1px solid #dceaff80;border-radius:999px;color:#fff;background:var(--elka-control-surface);font:600 11px/1 system-ui;cursor:pointer}
#storage-modal .collection-back-actions [data-action="place"]{background:var(--elka-positive-surface)}
#storage-modal .collection-back-actions [data-action="remove"]{background:var(--elka-negative-surface);border-color:#ffdce5a6}
#storage-modal .collection-back-actions [data-action="trade"]{background:var(--elka-control-surface);border-color:#dceaff80}
#storage-modal .collection-back-actions button:disabled{opacity:.35;cursor:default;box-shadow:none}
#storage-modal .collection-missing-info{margin:auto 0;color:#eef5ff;font:500 11px/1.4 system-ui;text-align:center}
#storage-modal .collection-missing-actions{margin-top:2px}
#storage-modal .collection-trade-action-wrap{position:relative;display:block}
#storage-modal .collection-trade-action-wrap>button{width:100%}
#storage-modal .collection-trade-action-wrap[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 7px);z-index:30;transform:translate(-50%,4px);width:142px;white-space:normal;padding:6px 8px;border-radius:8px;background:#183354;color:#fff;font:600 10px/1.25 system-ui;text-align:center;box-shadow:0 5px 14px #10253f42;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease,visibility .15s}
#storage-modal .collection-trade-action-wrap[data-tooltip]::before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);z-index:31;width:7px;height:7px;background:#183354;transform:translateX(-50%) rotate(45deg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s}
#storage-modal .collection-trade-action-wrap[data-tooltip]:hover::after,#storage-modal .collection-trade-action-wrap[data-tooltip]:hover::before{opacity:1;visibility:visible}
#storage-modal .collection-trade-action-wrap[data-tooltip]:hover::after{transform:translate(-50%,0)}
#storage-modal .trade-my-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#storage-modal .trade-offer-card,#storage-modal .trade-offer-card.published,#storage-modal .trade-offer-card.has-draft{grid-template-columns:1fr;grid-template-rows:1fr auto;min-height:126px;padding:12px;gap:10px;background:var(--elka-soft-cell);border:1px solid #e0ecff33;border-radius:16px;box-shadow:inset 0 0 10px #e7efff26}
#storage-modal .trade-card-exchange{justify-content:center}
#storage-modal .trade-slot-action{width:100%;min-width:0}
#storage-modal .trade-slot-action.trade-slot-publish:disabled{background:var(--elka-control-surface);opacity:.4}
#storage-modal .trade-slot-publish:not(:disabled){background:var(--elka-positive-surface)}
#storage-modal .trade-cancel-confirm{flex-wrap:wrap;justify-content:center;gap:6px;text-align:center}
#storage-modal .trade-cancel-confirm span{width:100%}
#storage-modal .trade-friend-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#storage-modal .trade-row.friend-offer{grid-template-columns:minmax(60px,1fr) 105px auto;gap:8px;padding:9px 0}
#storage-modal .trade-row .trade-toy{width:42px;height:42px;flex-basis:42px}
#storage-modal .trade-row .trade-toy img{width:39px;height:39px}
#storage-modal .trade-friend-avatar-wrap{gap:6px}
#storage-modal .trade-row>button:disabled{background:var(--elka-control-surface);border:1px solid #e1edff66;border-radius:999px;opacity:.4;font-weight:600;padding:8px 12px;cursor:default}
#storage-modal .trade-market-nav button{width:30px;height:30px;box-shadow:var(--elka-control-glow)}
#storage-modal .trade-market-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media(max-height:650px){#storage-modal .collection-back{padding:5px 7px;gap:3px}#storage-modal .collection-copy-info{font-size:10px;gap:0}#storage-modal .collection-missing-info{font-size:9px;line-height:1.3}#storage-modal .collection-back-actions{gap:2px;grid-template-columns:1fr 1fr}#storage-modal .collection-missing-actions{grid-template-columns:1fr}#storage-modal .collection-back-actions button{padding:5px 2px;font-size:9px}#storage-modal .collection-back-actions>button:first-child{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){#storage-modal .collection-flipper{transition:none}}

/* Original exchange-slot proportions; menus align to the whole offer card. */
#storage-modal .trade-offer-card,#storage-modal .trade-offer-card.published,#storage-modal .trade-offer-card.has-draft{min-height:132px;border-radius:16px;padding:12px;gap:10px;border-color:#d9f1ff80;box-shadow:inset 0 0 10px #e7efff26}
#storage-modal .trade-card-exchange{gap:9px}
#storage-modal .trade-card-exchange>.trade-toy,#storage-modal .trade-slot-picker .trade-slot-trigger{width:62px;height:62px;flex-basis:62px;border-radius:13px}
#storage-modal .trade-card-exchange>.trade-toy img{width:56px;height:56px}
#storage-modal .trade-slot-picker{position:static;flex-basis:62px}
#storage-modal .trade-slot-trigger .trade-toy{width:58px;height:58px;border-radius:11px}
#storage-modal .trade-slot-trigger .trade-toy img{width:54px;height:54px}
#storage-modal .trade-slot-action.trade-slot-cancel{min-height:34px;padding:7px 10px;border:1px solid #e1edff99;border-radius:999px;background:var(--elka-control-surface);box-shadow:var(--elka-control-glow);font:800 12px/1 system-ui;text-align:center;text-decoration:none}
#storage-modal .trade-offer-card:has(.trade-picker-menu:not([hidden])){z-index:60}
#storage-modal .trade-slot-picker .trade-picker-menu{top:81px;left:10px;right:10px;width:auto;min-width:0;max-height:230px;padding:8px;box-sizing:border-box}
#storage-modal .trade-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
#storage-modal .trade-slot-picker .trade-picker-option{width:100%;min-width:0;padding:5px 2px;box-sizing:border-box}
#storage-modal .trade-picker-empty{min-width:0}
#storage-modal .trade-history{border-top:0}
#storage-modal .trade-friend-list{column-gap:28px}
#storage-modal .trade-row.friend-offer{grid-template-columns:minmax(60px,max-content) 105px minmax(0,1fr);gap:7px}
#storage-modal .trade-row.friend-offer .trade-friend-avatar-wrap{max-width:112px}

/* Reference box: framed sections and luminous controls, with list history. */
#storage-modal .storage-tab{box-shadow:var(--elka-control-glow)}
#storage-modal :is(.trade-mine,.trade-market,.trade-history){padding:14px;margin:0 0 14px;border:1px solid #e0ecff33;border-radius:18px;background:#b6c7f81a;box-shadow:inset 0 0 10px #e7efff19}
#storage-modal .trade-history{margin-bottom:0}
#storage-modal .trade-my-list{gap:10px}
#storage-modal .trade-friend-list{gap:9px}
#storage-modal .trade-row.friend-offer{grid-template-columns:38px minmax(0,1fr) auto;gap:9px;min-height:62px;padding:9px 10px;border:1px solid #e0ecff33;border-radius:16px;background:var(--elka-soft-cell);box-shadow:inset 0 0 10px #e7efff26,0 3px 9px #263d6f19}
#storage-modal .trade-row.friend-offer .trade-friend-avatar-wrap{width:38px;max-width:none;height:38px}
#storage-modal .trade-friend-name{display:none}
#storage-modal .trade-friend-avatar-wrap::after,#storage-modal .trade-friend-avatar-wrap::before{display:block}
#storage-modal .trade-row .trade-exchange{justify-content:center;gap:7px}
#storage-modal .trade-row .trade-toy{width:42px;height:42px;flex-basis:42px}
#storage-modal .trade-row>button{padding:8px 12px;font-size:12px}
#storage-modal .trade-row>button:not(:disabled),#storage-modal .trade-slot-action.trade-slot-publish:not(:disabled){background:var(--elka-positive-surface);border:1px solid #dbffe7b3;box-shadow:var(--elka-control-glow)}
#storage-modal .trade-slot-action.trade-slot-publish:disabled{box-shadow:var(--elka-control-glow)}
#storage-modal .trade-history-row{background:none;box-shadow:none;border-radius:0}
#storage-modal .trade-history-row:last-of-type{border-bottom:0}

/* Fade clipped inventory cells into the glass instead of a hard edge. */
#edit-bar{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-left,0px),#000 calc(100% - var(--fade-right,24px)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fade-left,0px),#000 calc(100% - var(--fade-right,24px)),transparent)}
.editing .placed-decor:hover>img{filter:drop-shadow(0 0 2px #f2ffff) drop-shadow(0 0 5px #b9e8ff) drop-shadow(0 0 9px #8bcaffb3)}
.decor-size-controls{gap:6px;padding:5px 7px;top:50%;transform:translate(-50%,34px);border:1px solid #dceeffa6;background:var(--elka-control-surface);box-shadow:var(--elka-control-glow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.decor-size-controls button{display:grid;place-items:center;width:25px;height:25px;border:1px solid #e1edffb3;background:var(--elka-control-surface);color:#f8faff;box-shadow:inset 0 0 5px #e8f1ff66;font:600 18px/1 system-ui}
.decor-size-controls button:hover:not(:disabled){box-shadow:var(--elka-control-hover)}
.decor-size-controls button:disabled{opacity:.35;cursor:default}
.decor-size-controls button:focus-visible{outline:2px solid #efffff;outline-offset:2px}
.decor-size-controls span{font:700 11px/1 system-ui;color:#f4f7ff;min-width:25px}

#storage-open,.storage-tab{position:relative}
.trade-alert-badge{position:absolute;right:2px;top:-5px;z-index:3;display:grid;place-items:center;width:18px;height:18px;border:1px solid #ffdbe3;border-radius:50%;background:linear-gradient(#f8778f,#ba294c);color:white;font:800 13px/1 system-ui;box-shadow:0 0 8px #ff8aaa88;pointer-events:none}
.collection-new-badge{position:absolute;right:7px;top:7px;z-index:4;padding:3px 5px;border-radius:6px;background:#d83759;color:#fff;font:800 9px/1 system-ui;box-shadow:0 0 6px #f9809b66}
#storage-modal .collection-cell.reward-received .collection-front{border-color:#e3faff;box-shadow:inset 0 0 10px #e1f8ff66,0 0 14px #c7ecff}
.reward-count{animation:reward-count 1.4s ease both}
@keyframes reward-count{0%,100%{transform:scale(1);background:#21386766;color:#f3f7ff}35%,52%{transform:scale(1.32);background:#c73557;color:#fff;box-shadow:0 0 9px #ff7593aa}}
#storage-modal .collection-cell.reward-new-pending .collection-total{opacity:0}
#storage-modal .collection-cell.reward-new-spinning{z-index:3}
#storage-modal .collection-cell.reward-new-spinning .collection-flipper{transition:transform 1.5s cubic-bezier(.42,0,.2,1);pointer-events:none}
#storage-modal .collection-back.collection-reveal-back{display:block;padding:0;background:var(--elka-soft-cell);border-color:#e3faff;box-shadow:inset 0 0 10px #e1f8ff66,0 0 14px #c7ecff;overflow:visible}
#storage-modal .collection-reveal-content,#storage-modal .collection-reveal-normal{position:absolute;inset:0;box-sizing:border-box;padding:9px 10px 6px;transition:opacity .28s ease}
#storage-modal .collection-reveal-content{display:grid;grid-template-rows:minmax(0,1fr) 20px;opacity:1;pointer-events:none}
#storage-modal .collection-reveal-normal{display:flex;flex-direction:column;justify-content:center;gap:8px;opacity:0;pointer-events:none}
#storage-modal .collection-reveal-content .collection-image-wrap{position:relative;display:block;grid-row:1 / -1;min-height:0;width:100%;height:100%}
#storage-modal .collection-reveal-content .collection-toy-image{filter:drop-shadow(0 4px 3px #14295366)!important;opacity:1!important}
#storage-modal .collection-reveal-content .collection-total{position:absolute;right:10px;bottom:7px}
#storage-modal .collection-cell.reward-new-settled .collection-reveal-content{opacity:0}
#storage-modal .collection-cell.reward-new-settled .collection-reveal-normal{opacity:1;pointer-events:auto}
.reward-new-badge{animation:reward-new-badge .7s .08s cubic-bezier(.2,.8,.2,1) both}
@keyframes reward-new-badge{0%{opacity:0;transform:translateY(-5px) scale(.55)}70%{opacity:1;transform:translateY(0) scale(1.12)}100%{opacity:1;transform:scale(1)}}
.collection-reward-sparks{position:absolute;inset:7% 8%;z-index:3;pointer-events:none}
.collection-reward-sparks i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff9d8;box-shadow:0 0 4px #fff,0 0 8px #bceeff;opacity:0;animation:reward-spark 1.25s ease-out both}
.collection-reward-sparks i:nth-child(1){left:15%;top:22%;--sx:-15px;--sy:-14px;animation-delay:.05s}
.collection-reward-sparks i:nth-child(2){left:72%;top:16%;--sx:13px;--sy:-17px;animation-delay:.18s}
.collection-reward-sparks i:nth-child(3){left:84%;top:52%;--sx:18px;--sy:0;animation-delay:.08s}
.collection-reward-sparks i:nth-child(4){left:68%;top:80%;--sx:12px;--sy:17px;animation-delay:.24s}
.collection-reward-sparks i:nth-child(5){left:22%;top:78%;--sx:-13px;--sy:16px;animation-delay:.15s}
.collection-reward-sparks i:nth-child(6){left:8%;top:48%;--sx:-18px;--sy:1px;animation-delay:.3s}
@keyframes reward-spark{0%{opacity:0;transform:translate(0,0) scale(.3)}28%{opacity:1;transform:translate(0,0) scale(1.25)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.15)}}
#storage-modal .trade-row.trade-success{position:relative;overflow:hidden}
.trade-success>:not(.trade-success-label){filter:blur(4px);opacity:.3;pointer-events:none}
.trade-success-label{position:absolute;inset:0;display:grid;place-items:center;border:1px solid #baf5d4;border-radius:16px;background:#17664680;color:#f0fff4;font:800 19px/1 system-ui;text-shadow:0 0 10px #b3ffd8;backdrop-filter:blur(4px)}
.trade-leaving{opacity:0;transform:scale(.95);transition:opacity .25s,transform .25s}

@media(prefers-reduced-motion:reduce){.reward-count,.reward-new-badge,.collection-reward-sparks i{animation-duration:.01ms!important;animation-delay:0s!important}#storage-modal .collection-cell.reward-new-spinning .collection-flipper{transition-duration:.01ms!important}.trade-leaving{transform:none;transition:none}}

/* Reciprocal offers share the editor's green glass accent. */
#storage-modal .trade-offer-card.trade-matched,#storage-modal .trade-row.friend-offer.trade-matched{
  border-color:#b9ffd6;
  background:radial-gradient(ellipse at 25% 0,#d1ffe333,transparent 75%),linear-gradient(145deg,#4eae7b66,#227a5759),var(--elka-soft-cell);
  box-shadow:inset 0 0 12px #c9ffe54d,0 0 5px #cdffe9aa,0 0 15px #79ecaf73;
  transition:background .2s,box-shadow .2s,border-color .2s;
}

/* New and previously viewed exchanges share the same list presentation. */
#storage-modal .trade-history-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch;padding:14px;border:1px solid #e0ecff33;border-radius:18px;background:#b6c7f81a;box-shadow:inset 0 0 10px #e7efff19}
#storage-modal .trade-history-columns .trade-history{margin:0;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
#storage-modal .trade-history-columns .trade-history-row{grid-template-columns:minmax(0,1fr) 94px 52px;gap:7px;padding:5px 0;align-items:center}
#storage-modal .trade-history-columns .trade-history-exchange{gap:5px}
#storage-modal .trade-history-columns .trade-history-date{font-size:10px;white-space:nowrap}
#storage-modal .trade-history-columns .trade-empty{padding:16px 0}
@media(max-width:650px){#storage-modal .trade-history-columns{grid-template-columns:1fr}}

/* Keep the market footprint stable as offers and pagination disappear. */
#storage-modal .trade-market .trade-section-heading{min-height:30px}
#storage-modal .trade-market-nav:empty{display:flex;visibility:hidden}
#storage-modal .trade-friend-list{min-height:62px;align-items:start}
#storage-modal .trade-friend-list>.trade-empty{box-sizing:border-box;min-height:62px;display:flex;align-items:center;margin:0}


.storage-garland-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px;
  align-content:start;
  padding:8px 4px;
}

.storage-garland-card{
  position:relative;
  display:grid;
  justify-items:center;
  gap:12px;
  min-height:170px;
  padding:22px 18px 18px;
  border:1px solid #dcccae;
  border-radius:18px;
  background:#fff8e9;
  box-shadow:0 5px 16px rgb(83 58 29/.10);
}

.storage-garland-card :is(.factory-garland-preview,.factory-fringe-preview){
  margin-top:12px;
  transform:scale(1.18);
  transform-origin:center;
}

.storage-garland-name{
  max-width:165px;
  color:#183354;
  font-size:14px;
  line-height:1.25;
  text-align:center;
}

.storage-garland-count{
  position:absolute;
  right:10px;
  top:10px;
  display:grid;
  place-items:center;
  min-width:30px;
  height:30px;
  padding:0 8px;
  border-radius:999px;
  background:#e7d7b9;
  color:#183354;
  font-size:12px;
  font-weight:900;
}


/* Factory garlands in the decoration editor. */
.factory-garland-decor{
  width:128px;
  height:62px;
  transform:
    translate(-50%,-50%)
    rotate(var(--decor-rotation,0deg));
  overflow:visible;
}

.decor-garland-shape{
  --bulb-color:#ffd84d;
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  width:112px;
  height:44px;
  padding-top:16px;
  pointer-events:none;
}

.factory-garland-decor>.decor-garland-shape{
  width:118px;
}

.decor-garland-shape::before{
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  top:12px;
  height:2px;
  border-radius:999px;
  background:#485866;
  transform:rotate(-3deg);
}

.decor-garland-shape i{
  position:relative;
  z-index:1;
  width:11px;
  height:15px;
  border-radius:45% 45% 55% 55%;
  background:var(--bulb-color);
  box-shadow:
    0 0 5px color-mix(in srgb,var(--bulb-color) 76%,white),
    0 0 12px color-mix(in srgb,var(--bulb-color) 48%,transparent);
}

.decor-garland-shape i:nth-child(even){
  margin-top:5px;
}

.decor-garland-shape i::before{
  content:"";
  position:absolute;
  left:4px;
  top:-5px;
  width:4px;
  height:6px;
  border-radius:2px 2px 0 0;
  background:#65717e;
}

.edit-bar-garland-preview{
  display:grid;
  place-items:center;
  width:58px;
  height:54px;
  overflow:visible;
}

.edit-bar-garland-preview .decor-garland-shape{
  width:58px;
  height:30px;
  padding-top:10px;
}

.edit-bar-garland-preview .decor-garland-shape::before{
  top:8px;
  height:1.5px;
}

.edit-bar-garland-preview .decor-garland-shape i{
  width:7px;
  height:10px;
}

.edit-bar-garland-preview .decor-garland-shape i:nth-child(even){
  margin-top:3px;
}

.edit-bar-garland-preview .decor-garland-shape i::before{
  left:2px;
  top:-3px;
  width:3px;
  height:4px;
}

.decor-rotation-controls{
  display:none;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,39px);
  align-items:center;
  gap:6px;
  padding:5px 7px;
  border:1px solid #dceeffa6;
  border-radius:999px;
  background:var(--elka-control-surface);
  box-shadow:var(--elka-control-glow);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  white-space:nowrap;
  z-index:101;
}

.editing .factory-garland-decor.selected{
  z-index:100;
}

.editing .factory-garland-decor.selected .decor-rotation-controls{
  display:flex;
}

.decor-rotation-controls button{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  padding:0;
  border:1px solid #e1edffb3;
  border-radius:50%;
  background:var(--elka-control-surface);
  color:#f8faff;
  box-shadow:inset 0 0 5px #e8f1ff66;
  font:600 17px/1 system-ui;
  cursor:pointer;
}

.decor-rotation-controls button:hover{
  box-shadow:var(--elka-control-hover);
}

.decor-rotation-controls span{
  min-width:34px;
  color:#f4f7ff;
  font:700 11px/1 system-ui;
  text-align:center;
}

body:not(.editing) .factory-garland-decor .decor-garland-shape i{
  animation:factoryGarlandTwinkle 3.2s ease-in-out infinite;
}

body:not(.editing) .factory-garland-decor .decor-garland-shape i:nth-child(2){animation-delay:.35s}
body:not(.editing) .factory-garland-decor .decor-garland-shape i:nth-child(3){animation-delay:.7s}
body:not(.editing) .factory-garland-decor .decor-garland-shape i:nth-child(4){animation-delay:1.05s}
body:not(.editing) .factory-garland-decor .decor-garland-shape i:nth-child(5){animation-delay:1.4s}

@keyframes factoryGarlandTwinkle{
  0%,100%{filter:brightness(.92)}
  50%{filter:brightness(1.22)}
}


/* Factory fringe garlands share one geometry; only bulb colors vary. */
.factory-fringe-decor{
  width:148px;
  height:90px;
}

.decor-fringe-shape{
  --bulb-color:#ffd84d;
  position:relative;
  display:flex;
  justify-content:space-between;
  width:136px;
  height:74px;
  padding:0 6px;
  pointer-events:none;
}

.decor-fringe-shape::before{
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  top:8px;
  height:2px;
  border-radius:999px;
  background:#485866;
}

.decor-fringe-shape i{
  --drop:34px;
  position:relative;
  width:2px;
  height:var(--drop);
  margin-top:8px;
  border-radius:999px;
  background:#65717e;
}

.decor-fringe-shape i:nth-child(2),
.decor-fringe-shape i:nth-child(6){--drop:46px}
.decor-fringe-shape i:nth-child(3),
.decor-fringe-shape i:nth-child(5){--drop:56px}
.decor-fringe-shape i:nth-child(4){--drop:66px}

.decor-fringe-shape i::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:11px;
  height:15px;
  border-radius:45% 45% 55% 55%;
  background:var(--bulb-color);
  transform:translateX(-50%);
  box-shadow:
    0 0 5px color-mix(in srgb,var(--bulb-color) 76%,white),
    0 0 12px color-mix(in srgb,var(--bulb-color) 48%,transparent);
}

.decor-fringe-shape.multicolor i:nth-child(1){--bulb-color:#f05c67}
.decor-fringe-shape.multicolor i:nth-child(2){--bulb-color:#5d8ff0}
.decor-fringe-shape.multicolor i:nth-child(3){--bulb-color:#55b978}
.decor-fringe-shape.multicolor i:nth-child(4){--bulb-color:#ffd84d}
.decor-fringe-shape.multicolor i:nth-child(5){--bulb-color:#f05c67}
.decor-fringe-shape.multicolor i:nth-child(6){--bulb-color:#5d8ff0}
.decor-fringe-shape.multicolor i:nth-child(7){--bulb-color:#55b978}

.edit-bar-garland-preview .decor-fringe-shape{
  width:60px;
  height:45px;
  padding:0 2px;
}

.edit-bar-garland-preview .decor-fringe-shape::before{
  top:5px;
  height:1.5px;
}

.edit-bar-garland-preview .decor-fringe-shape i{
  --drop:17px;
  width:1.5px;
  margin-top:5px;
}

.edit-bar-garland-preview .decor-fringe-shape i:nth-child(2),
.edit-bar-garland-preview .decor-fringe-shape i:nth-child(6){--drop:22px}
.edit-bar-garland-preview .decor-fringe-shape i:nth-child(3),
.edit-bar-garland-preview .decor-fringe-shape i:nth-child(5){--drop:27px}
.edit-bar-garland-preview .decor-fringe-shape i:nth-child(4){--drop:32px}

.edit-bar-garland-preview .decor-fringe-shape i::after{
  bottom:-5px;
  width:6px;
  height:8px;
}

body:not(.editing) .factory-fringe-decor .decor-fringe-shape i::after{
  animation:factoryGarlandTwinkle 3.2s ease-in-out infinite;
}

body:not(.editing) .factory-fringe-decor .decor-fringe-shape i:nth-child(2)::after{animation-delay:.25s}
body:not(.editing) .factory-fringe-decor .decor-fringe-shape i:nth-child(3)::after{animation-delay:.5s}
body:not(.editing) .factory-fringe-decor .decor-fringe-shape i:nth-child(4)::after{animation-delay:.75s}
body:not(.editing) .factory-fringe-decor .decor-fringe-shape i:nth-child(5)::after{animation-delay:1s}
body:not(.editing) .factory-fringe-decor .decor-fringe-shape i:nth-child(6)::after{animation-delay:1.25s}
body:not(.editing) .factory-fringe-decor .decor-fringe-shape i:nth-child(7)::after{animation-delay:1.5s}


/* Shared factory artwork on the clearing and in the decoration tray. */
.factory-garland-decor>.factory-drawing{
  display:block;
  width:128px;
  height:72px;
  overflow:visible;
  pointer-events:none;
  flex:none;
}
.factory-fringe-decor>.factory-drawing{
  width:148px;
  height:90px;
}
.edit-bar-garland-preview>.factory-drawing{
  display:block;
  width:64px;
  height:45px;
  overflow:visible;
  pointer-events:none;
}
.editing .factory-garland-decor:hover>.factory-drawing,
.editing .factory-garland-decor.selected>.factory-drawing{
  filter:drop-shadow(0 0 3px #e1f6ff9c);
}
.factory-garland-decor .factory-drawing-lamp,
.edit-bar-garland-preview .factory-drawing-lamp{
  animation:factoryPlacedLampGlow 2.7s var(--phase) ease-in-out infinite;
  filter:drop-shadow(0 0 2px var(--lamp));
}
@keyframes factoryPlacedLampGlow{
  0%,100%{opacity:.6}
  40%{
    opacity:1;
    filter:brightness(1.35) drop-shadow(0 0 4px var(--lamp));
  }
  65%{opacity:.85}
}
@media(prefers-reduced-motion:reduce){
  .factory-garland-decor .factory-drawing-lamp,
  .edit-bar-garland-preview .factory-drawing-lamp{
    animation:none;
  }
}