@layer components{.cc-lane{--lane-accent:var(--accent);display:flex;flex-direction:column;min-width:0;height:var(--lane-h,clamp(400px,60dvh,520px));overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-group);background:var(--surface-2);transition:opacity .15s,border-color .15s,box-shadow .15s}.cc-lane[data-phone]{--lane-h:min(64dvh,560px);min-height:360px}.cc-lane[data-kind=lab]{--lane-accent:var(--elixir)}.cc-lane[data-kind=goblin]{--lane-accent:var(--done)}.cc-lane[data-dim]{opacity:.45}.cc-lane[data-takes]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}.cc-lane[data-over]{box-shadow:0 0 0 3px var(--accent)}.cc-tray{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-group)}.cc-lane-head,.cc-tray{background:var(--surface)}.cc-lane-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:3px solid var(--lane-accent);border-bottom:1px solid var(--line)}.cc-lane-scroll{scrollbar-width:thin;scrollbar-gutter:stable;scrollbar-color:color-mix(in srgb,var(--ink) 30%,transparent) transparent}.cc-lane-fade{position:absolute;inset-inline:0 10px;height:28px;pointer-events:none;opacity:0;transition:opacity .15s}.cc-lane-fade[data-on]{opacity:1}.cc-lane-fade-top{top:0;background:linear-gradient(var(--surface-2),transparent)}.cc-lane-fade-bottom{bottom:0;background:linear-gradient(transparent,var(--surface-2))}.cc-res{--tint:var(--surface);--edge:var(--line)}.cc-res[data-res=Gold2],.cc-res[data-res=Gold]{--tint:color-mix(in srgb,var(--accent-soft) 75%,var(--surface));--edge:var(--accent)}.cc-res[data-res=Elixir2],.cc-res[data-res=Elixir]{--tint:color-mix(in srgb,var(--elixir-soft) 75%,var(--surface));--edge:var(--elixir)}.cc-res[data-res=DarkElixir]{--tint:color-mix(in srgb,var(--ink) 8%,var(--surface));--edge:var(--muted)}.cc-card{position:relative;height:100%;overflow:hidden;border:1px solid var(--line);border-left:3px solid var(--edge);border-radius:var(--radius-control);background:var(--tint)}.cc-card[data-saved]{--tint:color-mix(in srgb,var(--done-soft) 70%,var(--surface));--edge:var(--done)}.cc-card[data-picked]{border-color:var(--accent);opacity:.5}.cc-card[draggable=true]{cursor:grab}.cc-card[draggable=true]:active{cursor:grabbing}.cc-card-grip{position:absolute;inset-block:0;inset-inline-start:2px;display:grid;place-items:center;width:14px;color:var(--muted);opacity:.7;pointer-events:none}.cc-card-grip svg{width:14px;height:14px}.cc-card[draggable=true]:hover .cc-card-grip{opacity:1}.cc-panel-head{position:sticky;top:8px;z-index:10;display:flex;flex-direction:column;gap:12px;padding-bottom:12px;background:var(--ground);box-shadow:0 -8px 0 0 var(--ground)}.cc-panel-head:after{content:"";position:absolute;inset-inline:0;top:100%;height:14px;background:linear-gradient(var(--ground),transparent);pointer-events:none}.cc-panel-tabs{display:flex;flex-direction:column;gap:12px}@media (max-height:699px){.cc-panel-head{display:contents}.cc-panel-head:after{display:none}.cc-panel-lead{margin-bottom:12px}.cc-panel-tabs{position:sticky;top:8px;z-index:10;padding-bottom:12px;background:var(--ground);box-shadow:0 -8px 0 0 var(--ground)}}}