/* hero-board.css — animert hero på forsiden (alle språk). Skript: js/hero-board.js */
#swtHero{border:1px solid var(--border);background:radial-gradient(1200px 400px at 15% -20%, rgba(142,197,255,.10), transparent 60%), linear-gradient(180deg,var(--surface),var(--surface-2));}
#swtHero .hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(16px,3vw,32px);align-items:center;}
@media(min-width:760px){#swtHero .hero-grid{grid-template-columns:auto 1fr auto;}}
#swtHero .board-wrap{position:relative;width:min(300px,78vw);margin:0 auto;}
/* Brettet følger appens standardprofil (SudokuBoardView.swift) */
#swtHero svg.board{width:100%;height:auto;display:block;border-radius:10px;overflow:visible;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));}
#swtHero .cell-num{font-family:"American Typewriter","AmericanTypewriter",Georgia,"Times New Roman",serif;font-weight:600;font-size:20px;fill:#000;text-anchor:middle;dominant-baseline:central;}
#swtHero .cell-pop{transform-box:fill-box;transform-origin:center;animation:swtPop .42s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes swtPop{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
#swtHero .halo{animation:swtHalo .7s ease-out both;}
@keyframes swtHalo{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
#swtHero .ripple{transform-box:fill-box;transform-origin:center;animation:swtRipple .7s ease-out both;}
@keyframes swtRipple{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.9)}}
#swtHero .unit-sheen{animation:swtSheen .9s ease-out both;}
@keyframes swtSheen{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
#swtHero .elim-note{font-family:system-ui,-apple-system,sans-serif;font-size:8px;font-weight:700;fill:#E5302F;text-anchor:middle;dominant-baseline:central;animation:swtElim 1.3s ease both;}
@keyframes swtElim{0%{opacity:0}15%{opacity:1}70%{opacity:1}100%{opacity:0}}
#swtHero .score-pill{animation:swtPill 1.1s ease-out both;}
#swtHero .pill-txt{font-family:system-ui,-apple-system,sans-serif;font-size:11px;font-weight:800;fill:#fff;text-anchor:middle;dominant-baseline:central;}
@keyframes swtPill{0%{opacity:0;translate:0 4px}15%{opacity:1;translate:0 0}70%{opacity:1;translate:0 -6px}100%{opacity:0;translate:0 -12px}}
#swtHero .tech-badge{position:absolute;left:50%;top:8px;transform:translate(-50%,-6px);background:rgba(20,22,30,.92);border:1px solid var(--accent);color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.3px;padding:5px 11px;border-radius:999px;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--shadow-1);transition:opacity .25s,transform .25s;z-index:2;}
#swtHero .tech-badge.show{opacity:1;transform:translate(-50%,0);}
#swtHero .hud{display:flex;align-items:baseline;gap:10px;justify-content:center;margin-top:12px;font-variant-numeric:tabular-nums;}
#swtHero .hud .lbl{font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;}
#swtHero .hud .val{font-size:clamp(24px,4vw,32px);font-weight:800;color:var(--text);}
#swtHero .hud .kick{font-size:12px;font-weight:700;color:var(--success);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;}
#swtHero .hud .kick.show{opacity:1;transform:translateY(0);}
#swtHero .hero-copy{max-width:520px;}
#swtHero .eyebrow{display:block;font-size:12px;line-height:1.5;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 8px;}
#swtHero .hero-h{font-size:clamp(22px,3.4vw,34px);line-height:1.15;margin:0 0 10px;}
#swtHero .hero-sub{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 16px;}
#swtHero .hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
#swtHero .stage{display:flex;gap:clamp(12px,2.5vw,24px);align-items:center;justify-content:center;flex-wrap:wrap;}
#swtHero .avatar-slot{display:flex;flex-direction:column;align-items:center;gap:8px;}
#swtHero .avatar-frame{padding:8px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,#16161c,#0e0e12);box-shadow:var(--shadow-1);position:relative;}
#swtHero .avatar-frame::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(142,197,255,.16);pointer-events:none;}
#swtHero .avatar-gif{display:block;width:clamp(104px,13vw,132px);height:auto;border-radius:10px;animation:swtBob 3.4s ease-in-out infinite;transform-origin:50% 90%;}
@keyframes swtBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#swtHero .avatar-gif.celebrate{animation:swtCheer .5s ease 3;}
@keyframes swtCheer{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-14px) scale(1.06)}70%{transform:translateY(0) scale(.98)}}
#swtHero .avatar-cap{font-size:11px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;}
#swtHero .fox-row{display:flex;align-items:center;gap:14px;margin-bottom:10px;}
#swtHero .confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
#swtHero .confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:1px;opacity:0;will-change:transform,opacity;}
#swtHero .confetti i.go{animation:swtFall var(--d,1.6s) cubic-bezier(.3,.6,.5,1) forwards;}
@keyframes swtFall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(360px) translateX(var(--x,0)) rotate(var(--r,360deg))}}
@media(prefers-reduced-motion:reduce){
  #swtHero .cell-pop,#swtHero .avatar-gif,#swtHero .avatar-gif.celebrate{animation:none!important;}
  #swtHero .confetti{display:none;}
}