.hobbies-section{padding-top:12px;padding-bottom:85px;--hobby-shadow:0 16px 45px #34275008}
.hobbies-section .section-heading{margin-bottom:28px}
.hobby-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.hobby-card{position:relative;isolation:isolate;overflow:hidden;min-width:0;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--hobby-shadow);transition:transform .25s,border-color .25s;scroll-snap-align:start}
.hobby-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--card-accent) 38%,var(--line))}
.hobby-card-cube{--card-accent:#7962d5;--card-tint:#efebfc;--card-art-ink:#4b3b84}
.hobby-card-fitness{--card-accent:#b96848;--card-tint:#f8ede4;--card-art-ink:#87533e}
.hobby-card-gallery{--card-accent:#9273b5;--card-tint:#efeafa;--card-art-ink:#7b649e}
.hobby-card-arena{--card-accent:#438c88;--card-tint:#e7f0e9;--card-art-ink:#2c6261}
.hobby-card-heading{position:relative;z-index:2;min-height:134px;padding:24px 12px 0;text-align:center}
.hobby-card h3{font-size:clamp(18px,1.6vw,23px);letter-spacing:-.55px;line-height:1.3}
.hobby-card h3 .en{display:block;white-space:nowrap}
.hobby-card h3 .zh{display:block;font-size:16px;font-weight:500;color:var(--muted);letter-spacing:.4px;margin-top:6px}
.hobby-level{display:inline-block;margin-top:13px;padding:5px 11px;border:1px solid color-mix(in srgb,var(--card-accent) 17%,var(--line));border-radius:7px;background:color-mix(in srgb,var(--card-accent) 5%,var(--surface));color:var(--card-accent);font-size:11px;font-weight:550;line-height:1.4}
.hobby-level .zh{display:block;font-size:12px;letter-spacing:.3px;margin-top:2px}
.hobby-art{height:166px;position:relative;display:grid;place-items:center;margin:9px 12px 0;overflow:hidden;border-radius:11px;background:radial-gradient(ellipse at 50% 54%,var(--card-tint),transparent 70%);color:var(--card-art-ink)}
.hobby-art-render{isolation:isolate;--art-glow:#8764e8;--art-glint:#70cde2;--art-tilt:-2deg;background:radial-gradient(ellipse at 50% 64%,color-mix(in srgb,var(--art-glow) 14%,transparent),transparent 69%)}
.hobby-art-fitness.hobby-art-render{--art-glow:#cb8f50;--art-glint:#b39ae8;--art-tilt:2deg}
.hobby-art-arena.hobby-art-render{--art-glow:#4ab8c3;--art-glint:#d6b45f;--art-tilt:0deg}
.hobby-art-render::before{content:'';position:absolute;z-index:-1;left:20%;right:20%;bottom:18px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--art-glow) 26%,transparent);filter:blur(13px);transform:scaleY(.7);transition:opacity .45s,transform .45s}
.hobby-art-render::after{content:'';position:absolute;z-index:-2;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--art-glow) 17%,transparent),transparent 68%);filter:blur(7px);pointer-events:none}
.hobby-art-image{position:relative;z-index:2;display:block;width:min(100%,220px);height:174px;max-width:220px;object-fit:contain;filter:drop-shadow(0 11px 9px #24203526) drop-shadow(0 0 12px color-mix(in srgb,var(--art-glow) 20%,transparent));transform:translateY(-1px);transition:transform .65s cubic-bezier(.2,.65,.3,1),filter .65s;pointer-events:none}
.hobby-art-arena .hobby-art-image{width:136px;height:136px;filter:drop-shadow(0 10px 9px #0f394633) drop-shadow(0 0 14px #42c6d84d)}
.hobby-art-orbit{position:absolute;z-index:1;width:179px;height:72px;border:1px solid color-mix(in srgb,var(--art-glow) 24%,transparent);border-top-color:color-mix(in srgb,var(--art-glint) 65%,transparent);border-right-color:color-mix(in srgb,var(--art-glow) 65%,transparent);border-radius:50%;transform:rotate(-22deg);box-shadow:0 0 15px color-mix(in srgb,var(--art-glow) 9%,transparent),inset 0 0 12px color-mix(in srgb,var(--art-glow) 6%,transparent);animation:hobby-orbit-drift 9s ease-in-out infinite alternate;pointer-events:none}
.hobby-art-orbit::after{content:'';position:absolute;right:14px;top:6px;width:4px;height:4px;border-radius:50%;background:var(--art-glint);box-shadow:0 0 8px 2px color-mix(in srgb,var(--art-glint) 40%,transparent)}
.hobby-art-sparks{position:absolute;z-index:3;inset:14px 18px;opacity:.7;background:radial-gradient(circle at 19% 28%,var(--art-glint) 0 1px,transparent 2px),radial-gradient(circle at 81% 20%,var(--art-glow) 0 1px,transparent 2px),radial-gradient(circle at 76% 80%,var(--art-glint) 0 1.3px,transparent 2.3px),radial-gradient(circle at 13% 71%,var(--art-glow) 0 1px,transparent 2px);filter:drop-shadow(0 0 3px var(--art-glow));animation:hobby-spark-drift 7s ease-in-out infinite alternate;pointer-events:none}
.hobby-art-shimmer{position:absolute;z-index:4;top:-25%;left:-70%;width:40%;height:150%;transform:skewX(-23deg);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--art-glint) 25%,transparent),transparent);opacity:0;pointer-events:none}
.hobby-card:is(:hover,:focus-within) .hobby-art-image{transform:translateY(-5px) scale(1.045) rotate(var(--art-tilt));filter:drop-shadow(0 15px 12px #2420352b) drop-shadow(0 0 17px color-mix(in srgb,var(--art-glow) 32%,transparent))}
.hobby-card:is(:hover,:focus-within) .hobby-art-render::before{opacity:.85;transform:scale(1.14,.8)}
.hobby-card:is(:hover,:focus-within) .hobby-art-shimmer{animation:hobby-art-sweep 1.3s ease-out both}
@keyframes hobby-orbit-drift{from{transform:rotate(-22deg) translateY(3px)}to{transform:rotate(-13deg) translateY(-3px)}}
@keyframes hobby-spark-drift{from{transform:translateY(3px);opacity:.5}to{transform:translateY(-4px);opacity:.8}}
@keyframes hobby-art-sweep{0%{left:-70%;opacity:0}25%{opacity:.55}100%{left:140%;opacity:0}}
.hobby-card-bottom{display:flex;justify-content:center;align-items:center;padding:19px 12px 23px}
.hobby-open{display:inline-flex;gap:12px;align-items:center;justify-content:center;min-width:120px;min-height:44px;border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:9px 13px;color:var(--ink);font-size:12px;font-weight:600;transition:background .2s,color .2s}
.hobby-open>span:first-child .zh{display:block;font-size:10px;font-weight:400;margin-top:2px}
.hobby-open>span:last-child{font-size:20px;font-weight:400;line-height:1}
.hobby-open:hover{background:var(--card-accent);border-color:var(--card-accent);color:#fff}
.hobby-open:disabled{opacity:.5;cursor:default}
.hobby-js-note{font-size:13px;color:var(--muted);margin-top:20px}
.hobby-js-note .zh{display:block;margin-top:4px}.hobbies-ready .hobby-js-note{display:none}
.hobby-art-gallery{background:radial-gradient(ellipse at 50% 55%,var(--card-tint),transparent 70%);perspective:700px}
.photo-orbit-cover{position:absolute;width:240px;height:130px;transform-style:preserve-3d;transform:rotateX(-9deg) rotateY(-14deg) scale(.8);transition:transform .8s}
.hobby-card-gallery:hover .photo-orbit-cover{transform:rotateX(-9deg) rotateY(8deg) scale(.8)}
.photo-orbit-cover i{position:absolute;left:70px;top:1px;width:100px;height:128px;border:1px solid color-mix(in srgb,var(--card-art-ink) 50%,transparent);border-radius:5px;background:color-mix(in srgb,var(--card-tint) 70%,var(--surface));box-shadow:0 7px 20px #49376115;transform:rotateY(var(--orbit-angle)) translateZ(119px);backface-visibility:hidden;display:grid;place-items:center}
.photo-orbit-cover i:before{content:'';position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--card-art-ink) 22%,transparent)}
.photo-orbit-cover i:after{content:'+';font-style:normal;color:var(--card-art-ink);font-size:21px;font-weight:200}
.photo-cover-floor{position:absolute;width:220px;height:80px;border:1px solid color-mix(in srgb,var(--card-art-ink) 18%,transparent);border-radius:50%;transform:translateY(53px) rotateX(62deg);box-shadow:0 0 40px #b290d61a}
html[data-language=zh] .hobbies-section.section h2>.zh{font-size:38px}
html[data-language=zh] .hobby-card h3 .zh{font-size:25px;font-weight:650;color:var(--ink);margin:0;letter-spacing:0}
html[data-language=zh] .hobby-level .zh{font-size:13px;margin:0}
html[data-language=zh] .hobby-open>span:first-child .zh{font-size:13px;font-weight:600;margin:0}
html[data-language=zh] .hobby-card-heading,html[data-language=en] .hobby-card-heading{min-height:111px}
html[data-theme=dark] .hobby-card-cube{--card-tint:#54437645;--card-art-ink:#b5a8e4}
html[data-theme=dark] .hobby-card-fitness{--card-tint:#71472c45;--card-art-ink:#d5a384}
html[data-theme=dark] .hobby-card-gallery{--card-accent:#c4a7e2;--card-tint:#54437645;--card-art-ink:#b5a8e4}
html[data-theme=dark] .hobby-card-arena{--card-tint:#26514c55;--card-art-ink:#83c3b4}
.hobby-dialog{padding:0;width:min(1040px,calc(100% - 40px));max-height:92dvh;border-radius:20px;overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 120px #17152650}
.hobby-dialog::backdrop{background:#161624b0;backdrop-filter:blur(12px)}
.hobby-dialog-header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--surface);border-bottom:1px solid var(--line);padding:20px 28px}
.hobby-dialog-header .eyebrow{font-size:9px;letter-spacing:1.7px;color:var(--purple)}
#hobby-dialog-title{display:flex;align-items:baseline;gap:14px;font-size:24px;line-height:1.3;letter-spacing:-.5px;margin-top:7px}
#hobby-dialog-title .zh{font-size:17px;font-weight:500;color:var(--muted);letter-spacing:0}
html[data-language=zh] #hobby-dialog-title .zh{font-size:24px;color:var(--ink);font-weight:650}
#hobby-dialog-close{border:1px solid var(--line);border-radius:50%;font-size:29px;line-height:1;width:40px;height:40px;flex-shrink:0}
#hobby-dialog-close:hover{background:var(--soft)}
.hobby-dialog-content{padding:24px 28px 28px;min-height:430px}
.hobby-loading{min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;font-size:15px;color:var(--muted)}
.hobby-loading .zh{font-size:14px}
.hobby-loading-orbit{width:38px;height:38px;border:1px solid var(--line);border-top:2px solid var(--purple);border-radius:50%;animation:hobby-spin 1s linear infinite;margin-bottom:8px}
@keyframes hobby-spin{to{transform:rotate(360deg)}}
.hgame-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hgame-button{min-height:43px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:9px 15px;font-size:13px;line-height:1.45;font-weight:550;transition:background .18s,transform .18s}
.hgame-button:hover:not(:disabled){background:var(--soft);transform:translateY(-1px)}
.hgame-button:disabled{opacity:.5}
.hgame-button.primary,.hgame-button[data-primary]{background:var(--purple);border-color:var(--purple);color:white}
.hgame-button .zh{font-size:12px;margin-left:6px}
.hgame-stat{padding:10px 15px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:13px}
.hgame-instructions{font-size:13px;line-height:1.8;color:var(--muted)}
.hgame-instructions .zh{display:block;font-size:13px;margin-top:3px}
html[data-language=zh] .hgame-button .zh{font-size:13px;margin:0}
@media(max-width:900px){.hobby-grid{grid-template-columns:repeat(4,minmax(212px,1fr));gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.hobby-card h3{font-size:20px}.hobbies-section{padding-bottom:65px}}
@media(max-width:650px){.hobbies-section{padding-top:0;padding-bottom:50px}.hobbies-section .section-heading{margin-bottom:22px}.hobby-art{height:155px}.hobby-grid{grid-template-columns:repeat(4,212px)}.hobby-card h3{font-size:18px}.hobby-card-heading{min-height:130px}.hobby-dialog{width:calc(100% - 14px);max-height:96dvh;border-radius:14px}.hobby-dialog-header{padding:15px 17px;gap:10px}.hobby-dialog-header .eyebrow{font-size:8px;letter-spacing:1px}#hobby-dialog-title{font-size:20px;gap:8px;flex-wrap:wrap}#hobby-dialog-title .zh{font-size:15px}.hobby-dialog-content{padding:17px 14px 20px;min-height:400px}#hobby-dialog-close{height:36px;width:36px;font-size:27px}html[data-language=zh] .hobbies-section.section h2>.zh{font-size:30px}html[data-language=zh] .hobby-card h3 .zh{font-size:25px}.hgame-button{min-height:44px;padding:9px 12px}.hgame-button .zh{display:block;margin:1px 0 0;font-size:11px}}
@media(prefers-reduced-motion:reduce){.hobby-card,.hobby-art svg,.photo-orbit-cover,.cover-barbell,.cover-player,.hgame-button{transition:none!important}.hobby-loading-orbit{animation:none}}
html[data-motion-paused=true] .hobby-card,html[data-motion-paused=true] .hobby-art svg,html[data-motion-paused=true] .photo-orbit-cover,html[data-motion-paused=true] .cover-barbell,html[data-motion-paused=true] .cover-player{transition:none}
@media print{.hobbies-section,.hobby-dialog{display:none!important}}

.photo-orbit-filled i{padding:5px;background:var(--surface)}
.photo-orbit-filled i:before,.photo-orbit-filled i:after{display:none}
.photo-orbit-filled img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}

/* Image effects keep their depth when motion is disabled. */
html[data-theme=dark] .hobby-art-render{background:radial-gradient(ellipse at 50% 64%,color-mix(in srgb,var(--art-glow) 22%,transparent),transparent 70%)}
html[data-theme=dark] .hobby-art-image{filter:drop-shadow(0 12px 12px #0007) drop-shadow(0 0 17px color-mix(in srgb,var(--art-glow) 30%,transparent))}
html[data-motion-paused=true] :is(.hobby-art-orbit,.hobby-art-sparks,.hobby-art-shimmer){animation:none!important}
html[data-motion-paused=true] .hobby-art-image,html[data-motion-paused=true] .hobby-art-render::before{transition:none}
html[data-motion-paused=true] .hobby-card:is(:hover,:focus-within) .hobby-art-image{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){
  .hobby-art-orbit,.hobby-art-sparks,.hobby-art-shimmer{animation:none!important}
  .hobby-art-image,.hobby-art-render::before{transition:none!important}
  .hobby-card:is(:hover,:focus-within) .hobby-art-image{transform:translateY(-1px)}
}
@media(max-width:650px){.hobby-art-image{height:164px;max-width:202px}.hobby-art-arena .hobby-art-image{width:128px;height:128px}.hobby-art-orbit{width:160px;height:66px}}