.group-card {--accent:#dfbf80;--ink:#eddec2;--frame:url('/assets/links/game-offline-v1/journal-frame.webp');position:relative;isolation:isolate;grid-column:1/-1;min-width:0;border-radius:10px;padding:44px;background:radial-gradient(ellipse at 25% 20%,#38271566,transparent 70%),#100e0b;color:#eddec2;}
.group-frame {position:absolute;inset:0;z-index:3;border:48px solid transparent;border-image-source:var(--frame);border-image-slice:230;border-image-width:48px;border-image-repeat:stretch;pointer-events:none;}
.group-layout {display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);align-items:center;gap:34px;}
.group-cover {position:relative;min-width:0;overflow:hidden;border-radius:4px;box-shadow:0 20px 42px #0007;border:1px solid #ac865738;}
.group-cover img {display:block;width:100%;height:auto;aspect-ratio:1640/856;object-fit:contain;transition:filter .3s;}
.group-photo-line {position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#fff4d512 49%,transparent 61%);opacity:0;transition:opacity .4s;}
.group-card:hover .group-photo-line {opacity:1;}
.group-card:hover .group-cover img {filter:brightness(1.04);}
.group-copy {position:relative;z-index:2;min-width:0;}
.group-label {display:flex;align-items:center;gap:7px;color:var(--accent);font-size:10px;letter-spacing:.17em;font-weight:750;}
.group-label svg {width:15px;height:15px;fill:currentColor;}
.group-copy h2 {margin:10px 0 12px;color:var(--ink);font-family:Georgia,'Times New Roman',serif;font-size:clamp(30px,3.4vw,43px);font-weight:500;line-height:1.08;letter-spacing:-.025em;}
.group-tagline {font-size:19px;line-height:1.4;color:#d9c9aa;margin:0 0 12px;font-weight:600;}
.group-description {font-size:13px;line-height:1.75;color:#a9a399;margin:0 0 17px;}
.group-topics {display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px;}
.group-topics span {font-size:10px;color:var(--accent);border:1px solid #bc9b6038;padding:5px 8px;border-radius:3px;}
.group-action {display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;width:fit-content;min-width:215px;padding:12px 17px;border:1px solid #efd293;border-radius:5px;background:linear-gradient(135deg,#e7ca93,#aa7836);color:#20170a;text-decoration:none;font-size:13px;font-weight:800;box-shadow:0 7px 23px #ac752026;transition:filter .18s,transform .18s,box-shadow .18s;}
.group-action svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .18s;}
.group-action:hover {filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 9px 25px #b8864140;}
.group-action:hover svg {transform:translateX(3px);}
.group-action:active {transform:translateY(1px);}
.group-destination {display:block;margin-top:9px;color:#827765;font-size:10px;}
[data-group-variant=journal] {--frame:url('/assets/links/game-offline-v1/journal-frame.webp');--accent:#e8bb77;--ink:#f1ddba;background:radial-gradient(ellipse at 80% 25%,#69452332,transparent 75%),#18100b;padding:53px;}
[data-group-variant=journal] .group-layout {grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr);gap:43px;}
[data-group-variant=journal] .group-cover {grid-column:2;grid-row:1;transform:rotate(1.2deg);border:5px solid #9a7546;box-shadow:6px 8px 0 #382b1a,0 24px 40px #0008;}
[data-group-variant=journal] .group-copy {grid-column:1;grid-row:1;}
[data-group-variant=journal] .group-topics span {border-style:dashed;}
[data-group-variant=portal] {--frame:url('/assets/links/game-offline-v1/journal-frame.webp');--accent:#76d7f3;--ink:#e7f9ff;background:radial-gradient(ellipse at 50% 50%,#17384f77,transparent 75%),#07111e;padding:42px;}
[data-group-variant=portal] .group-layout {display:flex;flex-direction:column;gap:24px;}
[data-group-variant=portal] .group-cover {width:100%;max-width:720px;border-color:#4284a266;}
[data-group-variant=portal] .group-copy {width:100%;display:grid;grid-template-columns:1fr auto;gap:0 24px;align-items:center;}
[data-group-variant=portal] .group-label {grid-column:1;}
[data-group-variant=portal] .group-copy h2 {font-family:inherit;font-size:32px;font-weight:800;grid-column:1;grid-row:2;margin:7px 0;}
[data-group-variant=portal] .group-tagline {grid-column:1;font-size:16px;margin:0;color:#a6d4e3;}
[data-group-variant=portal] .group-tagline br {display:none;}
[data-group-variant=portal] .group-description {grid-column:1/-1;margin:14px 0 0;max-width:740px;}
[data-group-variant=portal] .group-topics {display:none;}
[data-group-variant=portal] .group-action {grid-column:2;grid-row:1/4;background:linear-gradient(135deg,#a6ebff,#46add4);border-color:#b4f1ff;color:#061c2c;box-shadow:0 7px 25px #2bacc025;}
[data-group-variant=portal] .group-destination {grid-column:2;grid-row:4;color:#6696aa;}
@media(max-width:820px) {
 .group-card,[data-group-variant=journal],[data-group-variant=portal] {padding:35px;}
 .group-layout,[data-group-variant=journal] .group-layout {grid-template-columns:1fr;gap:25px;}
 [data-group-variant=journal] .group-cover,[data-group-variant=journal] .group-copy {grid-column:auto;grid-row:auto;}
 .group-copy h2 {font-size:35px;}
 .group-tagline br {display:none;}
 .group-frame {border-width:35px;border-image-width:35px;}
}
@media(max-width:600px) {
 .group-card,[data-group-variant=journal],[data-group-variant=portal] {padding:29px 25px 30px;}
 .group-layout,[data-group-variant=journal] .group-layout {gap:21px;}
 .group-frame {border-width:27px;border-image-width:27px;}
 .group-copy h2 {font-size:31px;margin:10px 0;}.group-tagline {font-size:17px;}.group-description {font-size:12px;}.group-label {font-size:9px;letter-spacing:.1em;}.group-topics {gap:5px;}
 .group-action {width:100%;min-width:0;}.group-destination {text-align:center;font-size:9px;}
 [data-group-variant=portal] .group-copy {display:block;}[data-group-variant=portal] .group-action {margin-top:18px;}[data-group-variant=portal] .group-description {margin-top:12px;}
}
@media(prefers-reduced-motion:reduce) {.group-card * {transition:none!important;}.group-action:hover {transform:none;}}
.group-card{--fx:#ffd17d;--fx-rgb:255,193,89;scroll-margin-top:24px;transition:box-shadow .3s}.group-card:hover,.group-card:focus-within{box-shadow:0 14px 60px #0008,0 0 24px #d6a14b28}.group-frame{filter:drop-shadow(0 0 3px #ffc96965)}
.vfx-stage{position:absolute;inset:4px;border-radius:10px;overflow:hidden;pointer-events:none;z-index:1}.group-layout{position:relative;z-index:2}.vfx-aura{position:absolute;inset:0;background:radial-gradient(ellipse at var(--mx,72%) var(--my,38%),rgba(var(--fx-rgb),.16),transparent 58%);opacity:.8;transition:opacity .25s}.group-card:hover .vfx-aura{opacity:1}
.vfx-trail{position:absolute;inset:8px;border-radius:7px;border:1px solid #eebc6655;box-shadow:inset 0 0 17px #d8942725}.vfx-trail:after{content:"";position:absolute;inset:-1px;background:linear-gradient(110deg,transparent 35%,#fff2c5 49%,transparent 62%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:2px;animation:rail-glint 5s ease-in-out infinite}
.vfx-sparks{position:absolute;inset:0}.vfx-spark{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#fff6da;box-shadow:0 0 7px 2px rgba(var(--fx-rgb),.75);opacity:0;animation:dust-rise var(--dur) ease-in-out var(--delay) infinite}.vfx-spark:nth-child(3n){border-radius:0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);width:11px;height:11px}
.vfx-photo-sweep{position:absolute;inset:-50%;pointer-events:none;background:linear-gradient(115deg,transparent 42%,#ffe6a82b 50%,transparent 58%);transform:translateX(-65%);animation:photo-glint 7s ease-in-out infinite}.vfx-compass{display:none}.vfx-orbit{display:none}
.group-action{position:relative;isolation:isolate;overflow:hidden;min-height:56px;min-width:244px;gap:14px;padding:12px 18px;border:1px solid #fff0c0;border-bottom:1px solid #fff0c0;border-radius:7px;background:linear-gradient(115deg,#f9df9c,#d5a24e 55%,#f3d58c);box-shadow:0 5px 0 #4c3016,0 10px 28px #dd9d4042;transition:transform 120ms ease-out,filter 150ms,box-shadow 150ms;color:#251607}.group-action>span,.group-action>svg{position:relative;z-index:2}.group-action:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff8 49%,transparent 65%);transform:translateX(-110%);animation:button-glint 4s ease-in-out 3}.group-action:after{content:"";position:absolute;inset:3px;border:1px solid #fff3;border-radius:3px;pointer-events:none}.group-action .vfx-button-icon{display:grid;place-items:center;font-size:21px;width:29px;height:29px;background:#40270717;border:1px solid #6c431f38;border-radius:50%;transition:transform .35s}.group-action>svg{margin-left:auto}
@media(hover:hover){.group-action:hover{transform:translateY(-3px);filter:brightness(1.12);box-shadow:0 8px 0 #4c3016,0 15px 35px rgba(var(--fx-rgb),.45)}.group-action:hover .vfx-button-icon{transform:rotate(90deg)}.group-action:hover>svg{transform:translateX(5px)}}
.group-action:focus-visible{outline:3px solid #fff0bd;outline-offset:6px;filter:brightness(1.12)}.group-action:active,.group-action.is-pressed{transform:translateY(3px) scale(.975);box-shadow:0 1px 0 #4c3016,0 3px 12px rgba(var(--fx-rgb),.4);filter:brightness(1.2)}.vfx-ripple{position:absolute!important;z-index:1!important;width:30px;height:30px;margin:-15px;background:#fff9;border-radius:50%;pointer-events:none;animation:tap-ripple .55s ease-out forwards}
.group-destination{margin-top:15px}.vfx-compass{position:absolute;right:14px;top:12px;width:76px;height:76px;fill:#201209a8;stroke:#ffdc8e;stroke-width:1;filter:drop-shadow(0 0 7px #ffba4c);pointer-events:none}.compass-needle{transform-origin:50px 50px;animation:needle-seek 6s ease-in-out infinite}.needle-fill{fill:#ffe8ac}.compass-ticks{stroke-width:2}
[data-vfx=compass] .vfx-compass{display:block}[data-vfx=compass] .vfx-photo-sweep{display:none}[data-vfx=compass] .vfx-spark{animation-name:star-twinkle}[data-vfx=compass] .vfx-orbit{display:block;position:absolute;width:290px;height:290px;left:-135px;top:calc(50% - 145px);border:1px dashed #eec67f66;border-radius:50%;outline:1px solid #dca75e38;outline-offset:16px;animation:orbit-spin 24s linear infinite}[data-vfx=compass] .vfx-orbit:after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff1b8;box-shadow:0 0 15px 5px #ffb441}[data-vfx=compass] .vfx-trail:after{animation-duration:3.5s}[data-vfx=compass] .group-action .vfx-button-icon{background:#3a2519;color:#ffe6ae}
[data-vfx=rift]{--fx:#8eeeff;--fx-rgb:100,219,255}[data-vfx=rift] .vfx-aura{background:radial-gradient(ellipse at 75% 55%,#2099bf35,transparent 60%),radial-gradient(ellipse at 15% 100%,#ff9e2228,transparent 60%)}[data-vfx=rift] .vfx-trail{border-color:#7bdeee66;box-shadow:inset 0 0 22px #259bbe32,0 0 7px #9bebf44a}[data-vfx=rift] .vfx-trail:after{background:linear-gradient(115deg,transparent 25%,#67eaff 42%,#e6ffff 49%,#ffca74 56%,transparent 70%);animation-duration:3s}[data-vfx=rift] .vfx-spark{width:26px;height:1px;clip-path:none;border-radius:50%;background:linear-gradient(90deg,transparent,#e4fbff);animation-name:meteor;box-shadow:0 0 8px #75e5ff}[data-vfx=rift] .vfx-photo-sweep{background:linear-gradient(115deg,transparent 42%,#8aeeff35 50%,transparent 58%);animation-duration:5s}[data-vfx=rift] .group-action{border-color:#b3f1ee;background:linear-gradient(110deg,#ffe4a8,#d4ad62 58%,#86e2df);box-shadow:0 5px 0 #4c3016,0 10px 32px #5fcbd34a}[data-vfx=rift] .group-action .vfx-button-icon{background:#0e3c41;color:#b1faff}[data-vfx=rift] .group-frame{filter:drop-shadow(0 0 3px #69defb99)}
@keyframes rail-glint{0%,15%{opacity:.1;transform:translateX(-40%)}45%{opacity:.85}80%,100%{opacity:0;transform:translateX(60%)}}@keyframes dust-rise{0%{transform:translateY(12px) scale(.5);opacity:0}35%{opacity:.85}100%{transform:translateY(-55px) scale(.3);opacity:0}}@keyframes star-twinkle{0%,100%{transform:scale(.3) rotate(0);opacity:.1}40%{transform:scale(1.1) rotate(70deg);opacity:.9}75%{opacity:.2}}@keyframes photo-glint{0%,25%{transform:translateX(-65%)}65%,100%{transform:translateX(65%)}}@keyframes button-glint{0%,35%{transform:translateX(-110%)}70%,100%{transform:translateX(110%)}}@keyframes needle-seek{0%,100%{transform:rotate(-30deg)}40%{transform:rotate(55deg)}60%{transform:rotate(40deg)}}@keyframes orbit-spin{to{transform:rotate(360deg)}}@keyframes meteor{0%,30%{transform:translate(-30px,-12px) rotate(24deg);opacity:0}45%{opacity:.9}80%,100%{transform:translate(75px,32px) rotate(24deg);opacity:0}}@keyframes tap-ripple{from{transform:scale(0);opacity:.8}to{transform:scale(20);opacity:0}}
.group-card[data-paused=true] *,.group-card[data-paused=true] *:before,.group-card[data-paused=true] *:after,.group-card[data-offscreen=true] *,.group-card[data-offscreen=true] *:before,.group-card[data-offscreen=true] *:after{animation-play-state:paused!important}
@media(max-width:600px){.group-action{min-width:0;width:100%;font-size:13px}.vfx-compass{width:48px;height:48px;right:8px;top:8px}.vfx-spark:nth-child(n+15){display:none}.vfx-tools{gap:8px}.vfx-tools a{width:100%;margin-bottom:3px}.vfx-trail{inset:6px}}
@media(prefers-reduced-motion:reduce){.group-card *,.group-card *:before,.group-card *:after{animation:none!important;transition:none!important}.vfx-spark{opacity:.35}.vfx-photo-sweep{display:none}.group-action:hover,.group-action:active,.group-action.is-pressed{transform:none}.group-action:active{filter:brightness(1.25)}}


/* Geometric icon centering: independent of font baselines and glyph metrics. */
.group-action{align-items:center;line-height:1.25}.group-action .vfx-button-icon{flex:0 0 30px;width:30px;height:30px;box-sizing:border-box;line-height:1;font-size:0}.group-action .vfx-button-icon svg{display:block;width:20px;height:20px;margin:0;transform:none;transition:none;stroke:currentColor;stroke-width:1.6}

.group-meta{display:flex;align-items:center;gap:8px;margin-top:12px}.group-meta .group-destination{margin:0}.group-motion-toggle{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:1px solid #b18b4e55;border-radius:50%;background:#1c160e;color:#e2c38c;cursor:pointer;font-size:13px;margin-left:auto}.group-motion-toggle:hover{background:#4c3319}.group-motion-toggle:focus-visible{outline:2px solid #ffe3a5;outline-offset:3px}

.group-card{display:block;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y;transition:transform 140ms ease-out,box-shadow 180ms ease-out}
.group-cta-block{width:fit-content;max-width:100%;margin-top:2px}.group-cta-block .group-action{width:100%;min-width:244px}.group-cta-block .group-meta{justify-content:center;margin-top:15px}.group-cta-block .group-destination{width:100%;text-align:center;color:#b5a184}
.group-card:focus-visible{outline:3px solid #ffe2a5;outline-offset:6px}.group-card:focus-visible .group-action{filter:brightness(1.14);box-shadow:0 5px 0 #4c3016,0 0 25px #ffc86b66}
@media(hover:hover){.group-card:hover{transform:translateY(-3px);box-shadow:0 18px 50px #0008,0 0 28px #ffcc6b40}.group-card:hover .group-action{filter:brightness(1.1);box-shadow:0 5px 0 #4c3016,0 10px 28px #dd9d4080}.group-card:hover .group-action>svg{transform:translateX(4px)}}
.group-card.is-card-pressed{transform:translateY(2px) scale(.995);box-shadow:0 0 0 2px #ffe2a577,0 0 36px #ffbf5e55}.group-card.is-card-confirmed{box-shadow:0 0 0 2px #ffe2a5aa,0 0 40px #ffbf5e66}.group-card.is-card-pressed .group-frame,.group-card.is-card-confirmed .group-frame{filter:brightness(1.25) drop-shadow(0 0 5px #ffd788)}
.card-tap-signal{position:absolute;width:40px;height:40px;margin:-20px;border:1px solid #ffe9b4;border-radius:50%;background:#ffd88120;box-shadow:0 0 15px #ffd47966;pointer-events:none;animation:card-tap .6s ease-out forwards}
@keyframes card-tap{from{transform:scale(.25);opacity:.85}to{transform:scale(10);opacity:0}}
@media(max-width:600px){.group-cta-block{width:100%}.group-cta-block .group-action{min-width:0}.group-cta-block .group-meta{margin-top:13px}}
@media(prefers-reduced-motion:reduce){.group-card{transition:none}.group-card:hover,.group-card.is-card-pressed{transform:none}.card-tap-signal{display:none}}