:root {
--green: #00ff41;
--cyan: #00f3ff;
--purple: #bc13fe;
--gold: #ffd200;
--orange: #ff6b00;
--magenta: #ff0080;
--dark: #000000;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: #000;
font-family: 'Rajdhani', 'Noto Sans TC', sans-serif;
color: #fff;
overflow: hidden;
height: 100%;
}
/* ── Fixed background canvases ── */
#green-canvas, #star-canvas {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 0;
pointer-events: none;
transition: opacity 0.6s ease;
}
#star-canvas { opacity: 0; }
/* ── 漣漪專用 canvas（全頁通用）── */
#ripple-canvas {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 2;
pointer-events: none;
}
/* ── Scroll container ── */
.scroll-container {
position: relative;
z-index: 1;
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
pointer-events: auto;
-webkit-user-select: none;
user-select: none;
}
section {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
position: relative;
padding: 20px;
}
/* ── Hero ── */
.hero-content { text-align: center; z-index: 2; }
.hero-title {
font-family: 'Orbitron', sans-serif;
font-size: clamp(3rem, 10vw, 7rem);
font-weight: 900;
letter-spacing: 0.15em;
color: #ffffff;
text-shadow:
0 0 0px #fff,
0 0 10px #fff,
0 0 25px var(--green),
0 0 55px var(--green),
0 0 100px var(--green),
0 0 180px rgba(0,255,65,.4);
animation: flicker 6s infinite;
will-change: opacity, transform;
}
@keyframes flicker {
0%, 93%, 95.5%, 97.5%, 100% { opacity: 1; }
94% { opacity: .55; }
95% { opacity: 1; }
96% { opacity: .3; }
97% { opacity: 1; }
98% { opacity: .7; }
99% { opacity: 1; }
}
.hero-sub {
margin-top: 20px;
font-size: clamp(1rem, 2.5vw, 1.35rem);
color: rgba(255,255,255,.75);
letter-spacing: .18em;
text-shadow: 0 0 12px rgba(0,255,65,.35);
min-height: 2em;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
}
.typewriter-cursor {
display: inline-block;
width: 2px;
height: 1.1em;
background: var(--green);
margin-left: 3px;
vertical-align: middle;
box-shadow: 0 0 8px var(--green);
animation: blink .75s step-end infinite;
}
.typewriter-chaos {
animation: type-glitch 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
position: relative;
text-shadow: 2px 0 0 rgba(255, 0, 64, 0.5), -2px 0 0 rgba(0, 243, 255, 0.5);
}
@keyframes type-glitch {
0% { transform: translate(0) }
20% { transform: translate(-2px, 1px) }
40% { transform: translate(-2px, -1px) }
60% { transform: translate(2px, 1px) }
80% { transform: translate(2px, -1px) }
100% { transform: translate(0) }
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.scroll-hint {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,.45);
font-size: .75rem;
letter-spacing: .25em;
text-align: center;
animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob {
0%,100% { transform: translateX(-50%) translateY(0); opacity:.45; }
50% { transform: translateX(-50%) translateY(-10px); opacity:.9; }
}
/* ── Game Cards ── */
.game-card {
--mx: 50%;
--my: 50%;
max-width: 820px;
width: 100%;
padding: 44px 48px;
background: rgba(5, 15, 8, 0.45);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(0, 255, 65, 0.25);
border-radius: 22px;
box-shadow:
0 8px 48px rgba(0,0,0,.8),
0 0 18px rgba(0,255,65,.18),
inset 0 0 30px rgba(0,255,65,.04);
transition: transform .4s cubic-bezier(.25,.8,.25,1), border-color .4s, box-shadow .4s;
position: relative;
overflow: hidden;
}
.game-card::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(0,255,65,.18), transparent);
transition: .55s ease;
}
.game-card:hover::before { left: 110%; }
.game-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: 22px;
background: radial-gradient(
320px circle at var(--mx, 50%) var(--my, 50%),
rgba(0,255,65,.10) 0%,
transparent 65%
);
opacity: 0;
transition: opacity .3s;
pointer-events: none;
}
.game-card:hover::after { opacity: 1; }
.game-card:hover {
transform: translateY(-10px) scale(1.016);
border-color: rgba(0,255,65,.85);
box-shadow:
0 24px 70px rgba(0,255,65,.22),
0 0 40px rgba(0,243,255,.18),
inset 0 0 50px rgba(0,255,65,.08);
}
.game-card:hover .card-title { text-shadow: 0 0 18px rgba(0,255,65,.5); }
.game-card:hover .accent-green { text-shadow: 0 0 22px rgba(0,255,65,.9); }
/* ── Space-theme cards ── */
.game-card--space {
background: rgba(5, 5, 20, 0.45);
border-color: rgba(0, 243, 255, 0.2);
box-shadow:
0 8px 48px rgba(0,0,0,.8),
0 0 18px rgba(188,19,254,.15),
inset 0 0 30px rgba(188,19,254,.04);
}
.game-card--space::before {
background: linear-gradient(90deg, transparent, rgba(0,243,255,.18), transparent);
}
.game-card--space::after {
background: radial-gradient(
320px circle at var(--mx, 50%) var(--my, 50%),
rgba(0,243,255,.12) 0%,
rgba(188,19,254,.06) 40%,
transparent 65%
);
}
.game-card--space:hover {
border-color: rgba(0,243,255,.85);
box-shadow:
0 24px 70px rgba(0,243,255,.25),
0 0 40px rgba(188,19,254,.25),
inset 0 0 50px rgba(0,243,255,.08);
}
.game-card--space:hover .card-title { text-shadow: 0 0 18px rgba(0,243,255,.5); }
.game-card--space:hover .accent-gold { text-shadow: 0 0 22px rgba(255,210,0,.9); }
/* ── Racing-theme card (carush 極速賽車) ── */
.game-card--racing {
background: linear-gradient(135deg, rgba(0,18,42,.55) 0%, rgba(8,4,32,.55) 45%, rgba(20,3,38,.5) 100%);
border-color: rgba(0, 212, 255, 0.22);
box-shadow:
0 8px 48px rgba(0,0,0,.8),
0 0 18px rgba(168,85,247,.15),
inset 0 0 30px rgba(0,212,255,.04);
}
.game-card--racing::before {
background: linear-gradient(90deg, transparent, rgba(0,212,255,.15), rgba(168,85,247,.12), transparent);
}
.game-card--racing::after {
background: radial-gradient(
320px circle at var(--mx, 50%) var(--my, 50%),
rgba(0,212,255,.12) 0%,
rgba(168,85,247,.06) 40%,
transparent 65%
);
}
.game-card--racing:hover {
border-color: rgba(0,212,255,.85);
box-shadow:
0 24px 70px rgba(0,212,255,.22),
0 0 40px rgba(168,85,247,.22),
inset 0 0 50px rgba(0,212,255,.08);
}
.game-card--racing:hover .card-title { text-shadow: 0 0 18px rgba(0,212,255,.5); }
.game-card--racing:hover .accent-neon { text-shadow: 0 0 22px rgba(0,212,255,.9); }
.game-card--racing:hover .card-desc { color: rgba(200,240,255,.82); }
/* ── Void-theme card (Soon 順獨自升級) ── */
.game-card--void {
background: linear-gradient(135deg, rgba(10,2,22,.6) 0%, rgba(30,3,18,.55) 55%, rgba(15,1,28,.5) 100%);
border-color: rgba(255, 45, 85, 0.22);
box-shadow:
0 8px 48px rgba(0,0,0,.8),
0 0 18px rgba(155,31,255,.15),
inset 0 0 30px rgba(255,45,85,.04);
}
.game-card--void::before {
background: linear-gradient(90deg, transparent, rgba(255,45,85,.15), rgba(155,31,255,.12), transparent);
}
.game-card--void::after {
background: radial-gradient(
320px circle at var(--mx, 50%) var(--my, 50%),
rgba(255,45,85,.1) 0%,
rgba(155,31,255,.06) 40%,
transparent 65%
);
}
.game-card--void:hover {
border-color: rgba(255,45,85,.85);
box-shadow:
0 24px 70px rgba(255,45,85,.2),
0 0 40px rgba(155,31,255,.25),
inset 0 0 50px rgba(255,45,85,.08);
}
.game-card--void:hover .card-title { text-shadow: 0 0 18px rgba(255,45,85,.5); }
.game-card--void:hover .accent-crimson { text-shadow: 0 0 22px rgba(255,45,85,.9); }
.game-card--void:hover .card-desc { color: rgba(255,210,220,.82); }
/* ── Tags ── */
.card-tag {
display: inline-block;
padding: 5px 14px;
border-radius: 50px;
font-size: .78rem;
font-family: 'Orbitron', sans-serif;
letter-spacing: .12em;
margin-bottom: 18px;
font-weight: 600;
transition: box-shadow .3s, border-color .3s;
}
.tag-green {
background: rgba(0,255,65,.1); color: var(--green);
border: 1px solid rgba(0,255,65,.4);
box-shadow: 0 0 8px rgba(0,255,65,.25);
}
.game-card:hover .tag-green {
border-color: rgba(0,255,65,.9);
box-shadow: 0 0 16px rgba(0,255,65,.55), 0 0 32px rgba(0,255,65,.2);
}
.tag-cyan {
background: rgba(0,243,255,.1); color: var(--cyan);
border: 1px solid rgba(0,243,255,.4);
box-shadow: 0 0 8px rgba(0,243,255,.25);
}
.tag-gold {
background: rgba(255,210,0,.1); color: var(--gold);
border: 1px solid rgba(255,210,0,.4);
box-shadow: 0 0 8px rgba(255,210,0,.25);
}
.tag-space-gold {
background: rgba(255,210,0,.08); color: var(--gold);
border: 1px solid rgba(255,210,0,.35);
box-shadow: 0 0 8px rgba(255,210,0,.2);
}
.game-card--space:hover .tag-space-gold {
border-color: rgba(255,210,0,.9);
box-shadow: 0 0 16px rgba(255,210,0,.55), 0 0 32px rgba(188,19,254,.2);
}
.tag-neon {
background: rgba(0,212,255,.1); color: #00d4ff;
border: 1px solid rgba(0,212,255,.4);
box-shadow: 0 0 8px rgba(0,212,255,.25);
}
.game-card--racing:hover .tag-neon {
border-color: rgba(0,212,255,.9);
box-shadow: 0 0 16px rgba(0,212,255,.55), 0 0 32px rgba(168,85,247,.2);
}
.tag-crimson {
background: rgba(255,45,85,.1); color: #ff2d55;
border: 1px solid rgba(255,45,85,.4);
box-shadow: 0 0 8px rgba(255,45,85,.25);
}
.game-card--void:hover .tag-crimson {
border-color: rgba(255,45,85,.9);
box-shadow: 0 0 16px rgba(255,45,85,.55), 0 0 32px rgba(155,31,255,.2);
}
/* ── Title & desc ── */
.card-title {
font-family: 'Orbitron', 'Noto Sans TC', sans-serif;
font-size: clamp(1.4rem, 3.5vw, 2.1rem);
font-weight: 700;
margin-bottom: 14px;
line-height: 1.3;
transition: text-shadow .3s;
}
.card-title .accent-green { color: var(--green); transition: text-shadow .3s; }
.card-title .accent-cyan { color: var(--cyan); transition: text-shadow .3s; }
.card-title .accent-gold { color: var(--gold); transition: text-shadow .3s; }
.card-title .accent-neon { color: #00d4ff; transition: text-shadow .3s; }
.card-title .accent-crimson { color: #ff2d55; transition: text-shadow .3s; }
.card-desc {
font-size: 1.08rem;
line-height: 1.85;
color: rgba(255,255,255,.65);
margin-bottom: 32px;
transition: color .3s;
}
.game-card:hover .card-desc { color: rgba(255,255,255,.82); }
.game-card--space:hover .card-desc { color: rgba(200,240,255,.82); }
/* ── CTA buttons ── */
.cta-btn {
display: inline-block;
padding: 13px 38px;
font-family: 'Orbitron', sans-serif;
font-size: .82rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
text-decoration: none;
border-radius: 6px;
position: relative;
overflow: hidden;
z-index: 1;
transition: color .25s, box-shadow .25s, transform .2s;
}
.cta-btn:hover { transform: scale(1.05); }
.cta-btn::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 0;
transition: height .28s ease;
z-index: -1;
}
.btn-green {
color: var(--green);
border: 1px solid var(--green);
box-shadow: 0 0 10px rgba(0,255,65,.35), inset 0 0 12px rgba(0,255,65,.05);
}
.btn-green::after { background: linear-gradient(90deg, #00ff41, #00f3ff); }
.btn-green:hover {
color: #000;
box-shadow: 0 0 30px rgba(0,255,65,.8), 0 0 60px rgba(0,243,255,.3);
border-color: #00f3ff;
}
.btn-cyan {
color: var(--cyan);
border: 1px solid var(--cyan);
box-shadow: 0 0 10px rgba(0,243,255,.35), inset 0 0 12px rgba(0,243,255,.05);
}
.btn-cyan::after { background: linear-gradient(90deg, #00f3ff, #bc13fe); }
.btn-cyan:hover {
color: #000;
box-shadow: 0 0 30px rgba(0,243,255,.8), 0 0 60px rgba(188,19,254,.3);
border-color: #bc13fe;
}
.btn-gold {
color: var(--gold);
border: 1px solid var(--gold);
box-shadow: 0 0 10px rgba(255,210,0,.35), inset 0 0 12px rgba(255,210,0,.05);
}
.btn-gold::after { background: linear-gradient(90deg, #ffd200, #bc13fe); }
.btn-gold:hover {
color: #000;
box-shadow: 0 0 30px rgba(255,210,0,.8), 0 0 60px rgba(188,19,254,.3);
border-color: #bc13fe;
}
.btn-neon {
color: #00d4ff;
border: 1px solid #00d4ff;
box-shadow: 0 0 10px rgba(0,212,255,.35), inset 0 0 12px rgba(0,212,255,.05);
}
.btn-neon::after { background: linear-gradient(90deg, #00d4ff, #a855f7, #f72585); }
.btn-neon:hover {
color: #000;
box-shadow: 0 0 30px rgba(0,212,255,.8), 0 0 60px rgba(168,85,247,.3);
border-color: #a855f7;
}
.btn-crimson {
color: #ff2d55;
border: 1px solid #ff2d55;
box-shadow: 0 0 10px rgba(255,45,85,.35), inset 0 0 12px rgba(255,45,85,.05);
}
.btn-crimson::after { background: linear-gradient(90deg, #ff2d55, #9b1fff); }
.btn-crimson:hover {
color: #fff;
box-shadow: 0 0 30px rgba(255,45,85,.8), 0 0 60px rgba(155,31,255,.3);
border-color: #9b1fff;
}
.cta-btn:hover::after { height: 100%; }
/* 尚未有任何可玩位置：保留按鈕形狀，但明確不可點 */
.cta-btn--off {
opacity: .45;
cursor: default;
border-style: dashed;
filter: saturate(.35);
}
.cta-btn--off:hover { transform: none; box-shadow: none; }
.cta-btn--off::after { display: none; }
/* ── Nav Dots ── */
.nav-dots {
position: fixed;
right: 28px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
display: flex;
flex-direction: column;
gap: 18px;
}
.dot {
width: 9px; height: 9px;
background: transparent;
border: 2px solid rgba(255,255,255,.25);
border-radius: 50%;
cursor: pointer;
transition: .3s;
}
.dot:hover, .dot.active {
background: var(--green);
border-color: var(--green);
box-shadow: 0 0 12px var(--green), 0 0 24px rgba(0,243,255,.5);
transform: scale(1.35);
}
.dot.space-dot.active {
background: var(--cyan);
border-color: var(--cyan);
box-shadow: 0 0 12px var(--cyan), 0 0 24px rgba(188,19,254,.6);
}
.dot.chaos-dot.active {
background: var(--magenta);
border-color: var(--magenta);
box-shadow: 0 0 14px var(--magenta), 0 0 28px rgba(255,107,0,.5);
}
.dot.racing-dot.active {
background: #00d4ff;
border-color: #00d4ff;
box-shadow: 0 0 12px #00d4ff, 0 0 24px rgba(168,85,247,.5);
}
.dot.void-dot.active {
background: #ff2d55;
border-color: #ff2d55;
box-shadow: 0 0 14px #ff2d55, 0 0 28px rgba(155,31,255,.5);
}
.dot.arcade-dot.active {
background: var(--orange);
border-color: var(--orange);
box-shadow: 0 0 14px var(--orange), 0 0 28px rgba(255,0,128,.5);
}
.dot.chain-dot.active {
background: #ffb02e;
border-color: #ffb02e;
box-shadow: 0 0 14px #ffb02e, 0 0 28px rgba(53,224,138,.45);
}
/* ══════════════════════════════════════
CHAOS SECTION (last page)
══════════════════════════════════════ */
.chaos-section {
flex-direction: column;
gap: 0;
background: transparent;
}
#conway-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.chaos-ui {
position: relative;
z-index: 5;
text-align: center;
pointer-events: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.chaos-eyebrow {
font-family: 'Orbitron', sans-serif;
font-size: .72rem;
letter-spacing: .35em;
color: rgba(255,0,128,.6);
text-transform: uppercase;
}
.chaos-title {
font-family: 'Orbitron', 'Noto Sans TC', sans-serif;
font-size: clamp(2.8rem, 9vw, 6.5rem);
font-weight: 900;
line-height: 1;
letter-spacing: .08em;
background: linear-gradient(135deg, #ff6b00, #ff0080, #bc13fe, #ff6b00);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradShift 4s ease infinite;
filter: drop-shadow(0 0 30px rgba(255,0,128,.5));
}
@keyframes gradShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.chaos-sub {
font-size: 1.05rem;
letter-spacing: .1em;
color: rgba(255,255,255,.5);
max-width: 480px;
}
.chaos-seed-btn {
margin-top: 8px;
padding: 14px 44px;
font-family: 'Orbitron', sans-serif;
font-size: .82rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
border: 1px solid var(--magenta);
color: var(--magenta);
background: rgba(255,0,128,.06);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: color .3s, box-shadow .3s, background .3s;
backdrop-filter: blur(6px);
}
.chaos-seed-btn::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 0;
background: var(--magenta);
transition: height .3s;
z-index: -1;
}
.chaos-seed-btn:hover {
color: #000;
box-shadow: 0 0 30px rgba(255,0,128,.7);
}
.chaos-seed-btn:hover::after { height: 100%; }
.chaos-stats {
display: flex;
gap: 32px;
font-family: 'Orbitron', sans-serif;
font-size: .65rem;
letter-spacing: .12em;
color: rgba(255,165,0,.5);
}
.stat-item { text-align: center; }
.stat-value { display: block; font-size: 1.4rem; font-weight: 700; color: var(--orange); text-shadow: 0 0 10px var(--orange); }
.chaos-section::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,.06) 2px,
rgba(0,0,0,.06) 4px
);
pointer-events: none;
z-index: 2;
}
.corner {
position: absolute;
z-index: 6;
width: 60px; height: 60px;
pointer-events: none;
}
.corner-tl { top: 20px; left: 20px; border-top: 2px solid var(--magenta); border-left: 2px solid var(--magenta); opacity: .6; }
.corner-tr { top: 20px; right: 20px; border-top: 2px solid var(--orange); border-right: 2px solid var(--orange); opacity: .6; }
.corner-bl { bottom: 20px; left: 20px; border-bottom: 2px solid var(--orange); border-left: 2px solid var(--orange); opacity: .6; }
.corner-br { bottom: 20px; right: 20px; border-bottom: 2px solid var(--magenta); border-right: 2px solid var(--magenta); opacity: .6; }
/* ── Glitch overlay canvas (hero section) ── */
#glitch-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
mix-blend-mode: screen;
opacity: 0;
transition: opacity .15s;
}
.hero-title-wrap {
position: relative;
display: inline-block;
}
.hero-title-wrap::before,
.hero-title-wrap::after {
content: attr(data-text);
font-family: 'Orbitron', sans-serif;
font-size: inherit;
font-weight: 900;
letter-spacing: 0.15em;
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
.hero-title-wrap::before {
color: #ff0040;
clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%);
}
.hero-title-wrap::after {
color: #00f3ff;
clip-path: polygon(0 55%, 100% 55%, 100% 75%, 0 75%);
}
.hero-title-wrap.glitching::before {
opacity: .85;
animation: rgb-shift-r .12s steps(1) infinite;
}
.hero-title-wrap.glitching::after {
opacity: .85;
animation: rgb-shift-b .12s steps(1) infinite;
}
@keyframes rgb-shift-r {
0% { transform: translateX(-4px) skewX(-1deg); clip-path: polygon(0 5%, 100% 5%, 100% 25%, 0 25%); }
25% { transform: translateX(5px) skewX(2deg); clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%); }
50% { transform: translateX(-6px) skewX(-3deg); clip-path: polygon(0 70%, 100% 70%, 100% 85%, 0 85%); }
75% { transform: translateX(3px) skewX(1deg); clip-path: polygon(0 20%, 100% 20%, 100% 45%, 0 45%); }
100%{ transform: translateX(-2px) skewX(-2deg); clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); }
}
@keyframes rgb-shift-b {
0% { transform: translateX(5px) skewX(2deg); clip-path: polygon(0 55%, 100% 55%, 100% 70%, 0 70%); }
25% { transform: translateX(-4px) skewX(-2deg); clip-path: polygon(0 10%, 100% 10%, 100% 30%, 0 30%); }
50% { transform: translateX(7px) skewX(3deg); clip-path: polygon(0 75%, 100% 75%, 100% 90%, 0 90%); }
75% { transform: translateX(-5px) skewX(-1deg); clip-path: polygon(0 35%, 100% 35%, 100% 55%, 0 55%); }
100%{ transform: translateX(3px) skewX(2deg); clip-path: polygon(0 0%, 100% 0%, 100% 20%, 0 20%); }
}
.hero-title-wrap.glitching .hero-title {
animation: flicker 6s infinite, shake .08s steps(2) infinite;
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-3px) skewX(-1deg); }
50% { transform: translateX(4px) skewX(2deg); }
75% { transform: translateX(-2px) skewX(-2deg); }
100%{ transform: translateX(3px) skewX(1deg); }
}
@media (max-width: 768px) {
.game-card { padding: 28px 24px; }
.card-title { font-size: 1.3rem; }
.nav-dots { right: 10px; }
.chaos-stats { gap: 18px; font-size: .6rem; }
}
/* ═══════════════════════════════════════════════════════════
ARCADE SECTION — 街機殿堂（最後一幕）
80s synthwave 背景 + CRT 街機機台 · 全部 inline 在 section 內
═══════════════════════════════════════════════════════════ */
#arcade-section {
position: relative;
overflow: hidden;
flex-direction: column;
padding: 0;
}
#arcade-rain-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
opacity: .55;
mix-blend-mode: screen;
}
/* 不透明 synthwave 背景 — 蓋掉底層 starfield/conway */
.synthwave-bg {
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(180deg,
#0a0118 0%,
#1a0530 28%,
#4a0a52 52%,
#ff2e63 70%,
#ff6b00 78%,
#1a0530 87%,
#060108 100%);
overflow: hidden;
}
.synthwave-stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 65%;
background-image:
radial-gradient(2px 2px at 18% 12%, #fff, transparent),
radial-gradient(1px 1px at 32% 25%, #fff, transparent),
radial-gradient(1.5px 1.5px at 55% 8%, #fff, transparent),
radial-gradient(1px 1px at 72% 18%, #fff, transparent),
radial-gradient(2px 2px at 88% 30%, #fff, transparent),
radial-gradient(1px 1px at 12% 40%, #fff, transparent),
radial-gradient(1.5px 1.5px at 45% 50%, #fff, transparent),
radial-gradient(1px 1px at 65% 38%, #fff, transparent),
radial-gradient(2px 2px at 92% 55%, #fff, transparent),
radial-gradient(1px 1px at 5% 60%, #fff, transparent);
background-size: 100% 100%;
opacity: .85;
animation: sw-twinkle 4s ease-in-out infinite alternate;
}
@keyframes sw-twinkle {
0% { opacity: .55; }
100% { opacity: .95; }
}
.synthwave-sun {
position: absolute;
left: 50%;
top: 50%;
width: 320px;
height: 320px;
transform: translate(-50%, -42%);
border-radius: 50%;
background: linear-gradient(180deg,
#ffd200 0%,
#ff6b00 38%,
#ff0080 70%,
#bc13fe 100%);
box-shadow:
0 0 70px rgba(255, 107, 0, .6),
0 0 140px rgba(255, 0, 128, .4),
0 0 220px rgba(188, 19, 254, .28);
}
.synthwave-sun::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: repeating-linear-gradient(0deg,
transparent 0, transparent 12px,
rgba(6, 1, 8, 1) 12px, rgba(6, 1, 8, 1) 16px,
transparent 16px, transparent 28px,
rgba(6, 1, 8, 1) 28px, rgba(6, 1, 8, 1) 34px,
transparent 34px, transparent 50px,
rgba(6, 1, 8, 1) 50px, rgba(6, 1, 8, 1) 58px);
}
.synthwave-sun::after {
content: "";
position: absolute;
left: -10%;
bottom: -2px;
width: 120%;
height: 50%;
background: linear-gradient(180deg, transparent 0%, #060108 60%);
}
.synthwave-grid {
position: absolute;
left: 50%;
bottom: 0;
width: 250%;
height: 50%;
transform: translateX(-50%) perspective(420px) rotateX(58deg);
transform-origin: 50% 100%;
background-image:
linear-gradient(to right, rgba(255, 0, 128, .55) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 243, 255, .55) 1px, transparent 1px);
background-size: 60px 60px;
box-shadow:
0 0 40px rgba(255, 0, 128, .35),
inset 0 0 80px rgba(188, 19, 254, .25);
animation: sw-grid-scroll 6s linear infinite;
}
@keyframes sw-grid-scroll {
0% { background-position: 0 0; }
100% { background-position: 0 60px; }
}
.synthwave-mountains {
position: absolute;
left: 0;
right: 0;
top: 47%;
height: 70px;
background:
linear-gradient(180deg, transparent 0%, rgba(6, 1, 8, .5) 60%, #060108 100%),
url("data:image/svg+xml;utf8,") center bottom / 100% 100% no-repeat;
}
.synthwave-scanlines {
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(180deg,
transparent 0,
transparent 2px,
rgba(0, 0, 0, .18) 2px,
rgba(0, 0, 0, .18) 3px);
mix-blend-mode: multiply;
}
/* ═══════════════════════════════════════════════════════════
ARCADE FRAME / HEADER
═══════════════════════════════════════════════════════════ */
.arcade-frame {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
padding: 40px 24px;
}
.arcade-header {
text-align: center;
}
.arcade-eyebrow {
font-family: 'Orbitron', monospace;
font-size: .82rem;
color: var(--magenta);
letter-spacing: .4em;
text-shadow: 0 0 14px var(--magenta), 0 0 26px var(--magenta);
display: inline-block;
animation: arcade-pulse-text 2s ease-in-out infinite;
}
@keyframes arcade-pulse-text {
0%, 100% { opacity: 1; }
50% { opacity: .55; }
}
.arcade-marquee {
font-family: 'Orbitron', sans-serif;
font-size: clamp(2.4rem, 5.5vw, 4rem);
font-weight: 900;
color: #fff;
margin: 14px 0 10px;
letter-spacing: .18em;
text-shadow:
0 0 18px var(--cyan),
0 0 36px var(--cyan),
5px 5px 0 var(--magenta),
-3px -3px 0 var(--purple);
}
.arcade-subtitle {
font-family: 'Orbitron', monospace;
color: rgba(255, 255, 255, .8);
font-size: 1rem;
letter-spacing: .28em;
text-shadow: 0 0 10px rgba(0, 243, 255, .6);
}
/* ═══════════════════════════════════════════════════════════
CABINETS — 三台街機機台
═══════════════════════════════════════════════════════════ */
.cabinet-row {
display: flex;
gap: 34px;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
width: 100%;
max-width: 1240px;
}
.cabinet {
--neon: var(--cyan);
width: 340px;
min-height: 510px;
text-decoration: none;
color: #fff;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #1a0628 0%, #0a020e 100%);
border: 3px solid var(--neon);
border-radius: 14px 14px 20px 20px;
box-shadow:
0 0 18px rgba(0, 0, 0, .6),
0 0 30px var(--neon),
inset 0 0 28px rgba(0, 0, 0, .8),
0 22px 50px rgba(0, 0, 0, .85);
transform: translateY(0);
transition:
transform .35s cubic-bezier(.2,.9,.25,1.15),
box-shadow .35s,
border-color .25s,
filter .25s;
position: relative;
overflow: hidden;
outline: none;
}
.cabinet::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(255, 255, 255, .04) 0%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, .04) 100%);
pointer-events: none;
}
.cabinet:hover,
.cabinet:focus-visible {
transform: translateY(-22px) scale(1.045);
filter: brightness(1.12) saturate(1.2);
box-shadow:
0 0 36px rgba(0, 0, 0, .7),
0 0 70px var(--neon),
0 0 130px var(--neon),
0 0 200px color-mix(in srgb, var(--neon) 55%, transparent),
inset 0 0 32px rgba(0, 0, 0, .8),
0 42px 90px rgba(0, 0, 0, .95);
}
.cabinet:active {
transform: translateY(-12px) scale(1.02);
transition-duration: .08s;
filter: brightness(1.35) saturate(1.4);
}
/* hover：搖桿往使用者傾、按鈕亮、招牌字微微 jitter、PRESS START 加速閃爍 */
.cabinet:hover .cabinet-joystick span,
.cabinet:focus-visible .cabinet-joystick span {
transform: translate(-50%, -75%);
box-shadow: 0 0 14px var(--neon), 0 0 24px var(--neon);
}
.cabinet:hover .cabinet-buttons span,
.cabinet:focus-visible .cabinet-buttons span {
transform: translateY(2px);
filter: brightness(1.4);
}
.cabinet:hover .cabinet-marquee-strip,
.cabinet:focus-visible .cabinet-marquee-strip {
animation: cabinet-marquee-buzz .18s steps(2) infinite;
}
.cabinet:hover .cabinet-coinslot,
.cabinet:focus-visible .cabinet-coinslot {
animation: coin-blink .55s ease-in-out infinite;
}
.cabinet:hover .cabinet-screen-inner,
.cabinet:focus-visible .cabinet-screen-inner {
background: radial-gradient(ellipse at center,
color-mix(in srgb, var(--neon) 18%, rgba(20, 8, 30, .9)) 0%,
rgba(6, 1, 8, .95) 75%);
}
.cabinet:hover .cabinet-name,
.cabinet:focus-visible .cabinet-name {
text-shadow: 0 0 14px var(--neon), 0 0 32px var(--neon), 0 0 48px var(--neon);
}
@keyframes cabinet-marquee-buzz {
0% { transform: translateX(0); }
50% { transform: translateX(.6px); }
100% { transform: translateX(-.6px); }
}
.cabinet-marquee-strip {
background: linear-gradient(180deg, var(--neon) 0%, rgba(0, 0, 0, .35) 100%);
color: #000;
text-align: center;
padding: 13px 10px;
font-family: 'Orbitron', monospace;
font-size: .88rem;
font-weight: 900;
letter-spacing: .18em;
border-bottom: 2px solid rgba(0, 0, 0, .55);
text-shadow: 0 0 4px rgba(255, 255, 255, .85);
position: relative;
}
.cabinet-marquee-strip::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(180deg,
transparent 0, transparent 2px,
rgba(0, 0, 0, .18) 2px, rgba(0, 0, 0, .18) 3px);
pointer-events: none;
}
.cabinet-marquee-strip span { position: relative; z-index: 1; }
.cabinet-screen {
margin: 14px 14px 8px;
padding: 5px;
background: #000;
border-radius: 14px;
border: 3px solid #1a0a22;
box-shadow:
inset 0 0 22px rgba(0, 0, 0, .95),
0 0 14px var(--neon);
position: relative;
}
.cabinet-screen-inner {
background: radial-gradient(ellipse at center,
rgba(20, 8, 30, .85) 0%,
rgba(6, 1, 8, .95) 75%);
border-radius: 10px;
padding: 22px 18px 18px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
overflow: hidden;
transition: background .25s;
}
.cabinet-screen-inner::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(180deg,
transparent 0, transparent 2px,
rgba(0, 0, 0, .35) 2px, rgba(0, 0, 0, .35) 3px);
pointer-events: none;
z-index: 5;
}
.cabinet-screen-inner::after {
content: "";
position: absolute;
inset: 0;
border-radius: 9px;
box-shadow: inset 0 0 32px rgba(0, 0, 0, .85);
pointer-events: none;
z-index: 4;
}
.cabinet-tag {
align-self: flex-start;
font-family: 'Orbitron', monospace;
font-size: .68rem;
padding: 5px 10px;
background: rgba(0, 0, 0, .65);
border: 1.5px solid var(--neon);
color: var(--neon);
letter-spacing: .18em;
text-shadow: 0 0 6px var(--neon);
position: relative;
z-index: 1;
}
/* 分類標籤 ←→ 版本號同一行，版本靠右 */
.cabinet-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
position: relative;
z-index: 1;
}
.cabinet-meta .cabinet-tag { align-self: auto; }
.cabinet-ver {
font-family: 'Orbitron', monospace;
font-size: .6rem;
letter-spacing: .1em;
color: rgba(255, 255, 255, .38);
white-space: nowrap;
transition: color .25s, text-shadow .25s;
}
.cabinet:hover .cabinet-ver,
.cabinet:focus-visible .cabinet-ver {
color: var(--neon);
text-shadow: 0 0 8px var(--neon);
}
.cabinet-name {
font-family: 'Orbitron', sans-serif;
font-size: 1.5rem;
font-weight: 900;
color: #fff;
margin: 6px 0 4px;
letter-spacing: .05em;
text-shadow: 0 0 10px var(--neon), 0 0 22px var(--neon);
position: relative;
z-index: 1;
transition: text-shadow .25s;
}
.cabinet-name small {
display: block;
font-size: .48em;
font-weight: 600;
opacity: .68;
letter-spacing: .22em;
margin-top: 5px;
color: var(--neon);
font-family: 'Orbitron', monospace;
}
.cabinet-desc {
color: rgba(255, 255, 255, .8);
font-size: .88rem;
line-height: 1.6;
margin: 4px 0;
position: relative;
z-index: 1;
}
.cabinet-feats {
list-style: none;
margin: 0;
padding: 0;
position: relative;
z-index: 1;
}
.cabinet-feats li {
color: var(--neon);
font-family: 'Orbitron', monospace;
font-size: .78rem;
letter-spacing: .04em;
line-height: 1.8;
text-shadow: 0 0 6px var(--neon);
opacity: .9;
}
.cabinet-controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px 12px;
background: linear-gradient(180deg, #1a0628 0%, #08020e 100%);
border-top: 2px solid rgba(255, 255, 255, .06);
border-bottom: 2px solid rgba(0, 0, 0, .6);
}
.cabinet-joystick {
width: 42px;
height: 42px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #555, #111 70%);
box-shadow:
inset 0 0 8px rgba(0, 0, 0, .9),
0 4px 10px rgba(0, 0, 0, .8);
position: relative;
}
.cabinet-joystick span {
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 16px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, var(--neon), #000 80%);
transform: translate(-50%, -50%);
box-shadow: 0 0 10px var(--neon);
transition: transform .25s, box-shadow .25s;
}
.cabinet-buttons {
display: flex;
gap: 10px;
}
.cabinet-buttons span {
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff, var(--neon) 50%, #000 100%);
box-shadow:
inset 0 -2px 4px rgba(0, 0, 0, .5),
0 0 10px var(--neon),
0 3px 6px rgba(0, 0, 0, .8);
transition: transform .15s, filter .15s;
}
.cabinet-buttons span:nth-child(2) {
background: radial-gradient(circle at 35% 30%, #fff, var(--gold) 50%, #000 100%);
box-shadow: inset 0 -2px 4px rgba(0,0,0,.5), 0 0 8px var(--gold), 0 3px 6px rgba(0,0,0,.8);
}
.cabinet-buttons span:nth-child(3) {
background: radial-gradient(circle at 35% 30%, #fff, var(--magenta) 50%, #000 100%);
box-shadow: inset 0 -2px 4px rgba(0,0,0,.5), 0 0 8px var(--magenta), 0 3px 6px rgba(0,0,0,.8);
}
.cabinet-coinslot {
background: linear-gradient(180deg, var(--neon) 0%, rgba(0, 0, 0, .55) 100%);
color: #000;
text-align: center;
padding: 14px;
font-family: 'Orbitron', monospace;
font-size: .92rem;
font-weight: 900;
letter-spacing: .25em;
border-top: 3px solid rgba(0, 0, 0, .65);
text-shadow: 0 0 4px rgba(255, 255, 255, .85);
animation: coin-blink 1.5s ease-in-out infinite;
position: relative;
}
.cabinet-coinslot::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(180deg,
transparent 0, transparent 2px,
rgba(0, 0, 0, .15) 2px, rgba(0, 0, 0, .15) 3px);
pointer-events: none;
}
@keyframes coin-blink {
0%, 100% { opacity: 1; }
50% { opacity: .55; }
}
.cabinet--orange { --neon: var(--orange); }
.cabinet--magenta { --neon: var(--magenta); }
.cabinet--cyan { --neon: var(--cyan); }
/* 輪播圓點 — 桌面隱藏 */
.carousel-dots { display: none; }
/* Nav dot for arcade — 洋紅街機光 */
.dot.arcade-dot.active {
background: var(--magenta);
border-color: var(--magenta);
box-shadow: 0 0 12px var(--magenta);
}
/* ═══════════════════════════════════════════════════════════
⚡ LIGHTNING — 卡牌 hover 觸發。動態 lx/lcol 由 JS 設定。
.strike class 由 JS 加上以強制重啟動畫（每張卡都能觸發）
═══════════════════════════════════════════════════════════ */
.lightning-flash {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 28%; /* 只打卡牌上方天空，不蓋卡牌 */
z-index: 4;
pointer-events: none;
opacity: 0;
background:
radial-gradient(ellipse 55% 90% at var(--lx, 50%) 60%,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, .9) 6%,
var(--lcol, #fff) 14%,
color-mix(in srgb, var(--lcol, #fff) 55%, transparent) 32%,
color-mix(in srgb, var(--lcol, #fff) 18%, transparent) 55%,
transparent 80%);
mix-blend-mode: screen;
will-change: opacity;
}
/* SVG 閃電基底 — 三種變體共用，只打卡牌上方 */
svg.lightning-bolt {
position: absolute;
top: 0;
left: var(--lx, 50%);
width: 260px;
height: 27%; /* 只打到 cabinet 上方，不覆蓋卡牌 */
transform: translateX(-50%);
z-index: 5;
pointer-events: none;
opacity: 0;
overflow: visible;
will-change: opacity, transform;
}
svg.lightning-bolt path,
svg.lightning-bolt rect,
svg.lightning-bolt circle {
fill: none;
stroke: #ffffff;
stroke-linecap: round;
stroke-linejoin: round;
filter:
drop-shadow(0 0 4px var(--lcol, #fff))
drop-shadow(0 0 12px var(--lcol, #fff))
drop-shadow(0 0 26px var(--lcol, #fff))
drop-shadow(0 0 50px var(--lcol, #fff));
}
svg.lightning-bolt .bolt-main { stroke-width: 4.5; }
svg.lightning-bolt .bolt-branch { stroke-width: 2.2; opacity: .85; }
svg.lightning-bolt .bolt-glow {
stroke-width: 14;
opacity: .35;
filter: blur(3px);
}
/* 橘色 — Minecraft 方塊步階雷 + 像素碎塊 */
svg.lightning-bolt--orange .bolt-main { stroke-width: 6; stroke-linejoin: miter; stroke-linecap: square; }
svg.lightning-bolt--orange .bolt-glow { stroke-width: 18; stroke-linejoin: miter; stroke-linecap: square; }
svg.lightning-bolt--orange .bolt-debris {
fill: #ffffff;
stroke: none;
filter:
drop-shadow(0 0 3px var(--lcol, #fff))
drop-shadow(0 0 8px var(--lcol, #fff))
drop-shadow(0 0 16px var(--lcol, #fff));
}
/* 洋紅 — 爆擊星芒 + 衝擊球 */
svg.lightning-bolt--magenta .bolt-main { stroke-width: 5; }
svg.lightning-bolt--magenta .bolt-glow { stroke-width: 16; }
svg.lightning-bolt--magenta .bolt-impact {
fill: var(--lcol, #fff);
stroke: #ffffff;
stroke-width: 2;
filter:
drop-shadow(0 0 8px var(--lcol, #fff))
drop-shadow(0 0 22px var(--lcol, #fff))
drop-shadow(0 0 44px var(--lcol, #fff));
}
svg.lightning-bolt--magenta .bolt-impact-inner {
fill: #ffffff;
stroke: none;
filter: drop-shadow(0 0 6px #fff);
}
/* 青色 — 神經樹枝（細而多分支） */
svg.lightning-bolt--cyan .bolt-main { stroke-width: 3; }
svg.lightning-bolt--cyan .bolt-glow { stroke-width: 10; }
svg.lightning-bolt--cyan .bolt-branch { stroke-width: 1.5; opacity: .9; }
/* ═══════════════════════════════════════════════════════════
🔥 FIREN FIRE TRAIL — 跑過的地面留下火焰道路
地面高度、散佈火焰 patch、越遠越小越淡（像火腳印）
═══════════════════════════════════════════════════════════ */
.creature--lf2-firen::before {
content: "";
position: absolute;
bottom: -2px;
right: 75%;
width: 220px;
height: 14px;
background:
/* 隨機燃燒 texture：不規則亮暗斑塊 */
radial-gradient(circle 6px at 92% 40%, rgba(255,255,255,.5), transparent),
radial-gradient(circle 5px at 78% 55%, rgba(255,210,0,.6), transparent),
radial-gradient(circle 4px at 62% 35%, rgba(255,255,255,.35), transparent),
radial-gradient(circle 6px at 48% 50%, rgba(255,210,0,.45), transparent),
radial-gradient(circle 3px at 35% 45%, rgba(255,255,255,.2), transparent),
/* 底色漸層 */
linear-gradient(to right,
rgba(255, 107, 0, 0) 0%,
rgba(196, 24, 24, .3) 15%,
rgba(255, 0, 0, .5) 35%,
rgba(255, 107, 0, .7) 55%,
rgba(255, 210, 0, .85) 75%,
rgba(255, 107, 0, 1) 100%);
border-radius: 2px;
pointer-events: none;
filter:
drop-shadow(0 0 3px rgba(255, 107, 0, .7))
drop-shadow(0 0 8px rgba(255, 0, 0, .5));
animation: ground-glow .2s steps(2) infinite;
}
/* 🔥 飛散火星粒子 — box-shadow 負 x 散在火帶上（身後=左邊） */
.creature--lf2-firen::after {
content: "";
position: absolute;
bottom: 10px;
right: 76%;
width: 3px;
height: 3px;
border-radius: 50%;
background: #ffd200;
pointer-events: none;
box-shadow:
/* 近處（Firen 腳邊）密集火星 */
-8px -3px 2px 1px rgba(255, 210, 0, .9),
-18px -7px 1px 0 rgba(255, 107, 0, .8),
-30px -11px 2px 1px rgba(255, 255, 255, .7),
-40px -2px 1px 0 rgba(255, 0, 0, .8),
-52px -9px 2px 1px rgba(255, 210, 0, .7),
-60px -5px 1px 0 rgba(255, 107, 0, .9),
/* 中段 */
-80px -7px 1px 0 rgba(255, 210, 0, .6),
-100px -3px 2px 1px rgba(255, 0, 0, .5),
-115px -10px 1px 0 rgba(255, 107, 0, .5),
-130px -5px 1px 0 rgba(255, 210, 0, .4),
/* 遠處稀疏 */
-160px -3px 1px 0 rgba(255, 107, 0, .3),
-190px -6px 1px 0 rgba(255, 0, 0, .2);
animation: fire-sparks 0.4s ease-out infinite alternate;
}
@keyframes ground-glow {
0% { opacity: .8; }
50% { opacity: 1; }
100% { opacity: .85; }
}
@keyframes fire-sparks {
0% {
transform: translateY(0);
opacity: .85;
box-shadow:
-8px -3px 2px 1px rgba(255, 210, 0, .9),
-18px -7px 1px 0 rgba(255, 107, 0, .8),
-30px -11px 2px 1px rgba(255, 255, 255, .7),
-40px -2px 1px 0 rgba(255, 0, 0, .8),
-52px -9px 2px 1px rgba(255, 210, 0, .7),
-60px -5px 1px 0 rgba(255, 107, 0, .9),
-80px -7px 1px 0 rgba(255, 210, 0, .6),
-100px -3px 2px 1px rgba(255, 0, 0, .5),
-115px -10px 1px 0 rgba(255, 107, 0, .5),
-130px -5px 1px 0 rgba(255, 210, 0, .4),
-160px -3px 1px 0 rgba(255, 107, 0, .3),
-190px -6px 1px 0 rgba(255, 0, 0, .2);
}
100% {
transform: translateY(-6px);
opacity: .5;
box-shadow:
-10px -9px 2px 1px rgba(255, 210, 0, .6),
-20px -14px 1px 0 rgba(255, 107, 0, .4),
-32px -18px 2px 1px rgba(255, 255, 255, .3),
-42px -7px 1px 0 rgba(255, 0, 0, .5),
-54px -16px 2px 1px rgba(255, 210, 0, .4),
-62px -12px 1px 0 rgba(255, 107, 0, .5),
-82px -14px 1px 0 rgba(255, 210, 0, .3),
-102px -9px 2px 1px rgba(255, 0, 0, .2),
-117px -16px 1px 0 rgba(255, 107, 0, .2),
-132px -10px 1px 0 rgba(255, 210, 0, .15),
-162px -8px 1px 0 rgba(255, 107, 0, .1),
-192px -12px 1px 0 rgba(255, 0, 0, .05);
}
}
/* ═══════════════════════════════════════════════════════════
👾 ARCADE CREATURES — 地面像素怪物移動
殭屍 / 史萊姆 / 衝撞拳士 踏在合成波地平線上
═══════════════════════════════════════════════════════════ */
.arcade-creatures {
position: absolute;
left: 0;
right: 0;
bottom: 4px;
height: 150px;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.creature {
position: absolute;
bottom: 0;
width: 56px;
height: 56px;
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain;
image-rendering: pixelated;
image-rendering: crisp-edges;
filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .65))
drop-shadow(0 0 8px rgba(0, 0, 0, .8));
}
/* Minecraft 殭屍 — 經典方頭 + 雙手前伸 + 青褲 */
.creature--zombie {
width: 44px;
height: 72px;
background-image: url("data:image/svg+xml;utf8,");
animation: walk-right 22s linear infinite;
animation-delay: -3s;
}
/* 楓之谷藍史萊姆 */
.creature--slime {
width: 52px;
height: 40px;
background-image: url("data:image/svg+xml;utf8,");
animation: slime-bounce 2.4s ease-in-out infinite, walk-left 28s linear infinite;
animation-delay: 0s, -8s;
}
/* LF2 Louis — 金髮 + 綠披風 + 鳳凰拳能量擊（朝右） */
.creature--fighter {
width: 84px;
height: 76px;
background-image: url("data:image/svg+xml;utf8,");
animation: walk-right 14s linear infinite, fighter-shake .14s steps(2) infinite, louis-aura .6s ease-in-out infinite;
animation-delay: -10s, 0s, 0s;
}
/* LF2 Firen — 紅焰髮 + 裸胸 + 火球 + 腳邊火焰光環（朝右） */
.creature--lf2-firen {
width: 84px;
height: 76px;
background-image: url("data:image/svg+xml;utf8,");
animation: walk-right 18s linear infinite, fighter-shake .14s steps(2) infinite, firen-aura .35s ease-in-out infinite;
animation-delay: -2s, 0s, 0s;
}
@keyframes louis-aura {
0%, 100% { filter: drop-shadow(0 4px 0 rgba(0,0,0,.65)) drop-shadow(0 0 8px rgba(0, 128, 255, .7)) drop-shadow(0 0 18px rgba(45, 140, 78, .55)); }
50% { filter: drop-shadow(0 4px 0 rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(0, 200, 255, 1)) drop-shadow(0 0 28px rgba(255, 210, 0, .7)); }
}
@keyframes firen-aura {
0%, 100% { filter: drop-shadow(0 4px 0 rgba(0,0,0,.65)) drop-shadow(0 0 10px rgba(255, 107, 0, .9)) drop-shadow(0 0 22px rgba(255, 0, 0, .7)); }
50% { filter: drop-shadow(0 4px 0 rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(255, 210, 0, 1)) drop-shadow(0 0 38px rgba(255, 0, 0, .9)); }
}
/* 第二隻殭屍（紅眼變種、往左走） */
.creature--zombie-2 {
width: 40px;
height: 66px;
background-image: url("data:image/svg+xml;utf8,");
animation: walk-left 26s linear infinite;
animation-delay: -14s;
}
/* Minecraft 苦力怕 Creeper — 4 短腿 + 招牌悲傷臉 */
.creature--creeper {
width: 42px;
height: 70px;
background-image: url("data:image/svg+xml;utf8,");
animation: walk-right 30s linear infinite;
animation-delay: -6s;
}
/* Minecraft 骷髏弓箭手 — 持弓朝怪物射箭 */
.creature--skeleton {
width: 56px;
height: 70px;
background-image: url("data:image/svg+xml;utf8,");
animation: walk-right 18s linear infinite;
animation-delay: -7s;
position: absolute;
overflow: visible !important;
}
/* 骷髏射出的箭 — pseudo-element 飛出去 */
.creature--skeleton::after {
content: "";
position: absolute;
bottom: 38%;
left: 100%;
width: 22px;
height: 6px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
image-rendering: pixelated;
filter: drop-shadow(0 0 4px rgba(255,255,255,.6));
animation: arrow-shoot 4s ease-out infinite;
pointer-events: none;
}
@keyframes arrow-shoot {
0% { transform: translateX(0); opacity: 0; }
8% { transform: translateX(0); opacity: 1; }
50% { transform: translateX(380px); opacity: 1; }
58% { transform: translateX(420px); opacity: 0; }
100% { transform: translateX(420px); opacity: 0; }
}
/* 第二隻史萊姆（紅色變種） */
.creature--slime-red {
width: 44px;
height: 34px;
background-image: url("data:image/svg+xml;utf8,");
animation: slime-bounce 3.2s ease-in-out infinite, walk-right 32s linear infinite;
animation-delay: -1s, -20s;
}
@keyframes walk-right {
0% { left: -10%; transform: scaleX(1); }
100% { left: 110%; transform: scaleX(1); }
}
@keyframes walk-left {
0% { left: 110%; transform: scaleX(-1); }
100% { left: -10%; transform: scaleX(-1); }
}
@keyframes slime-bounce {
0%, 100% { translate: 0 0; }
50% { translate: 0 -10px; }
}
@keyframes fighter-shake {
0% { translate: 0 0; }
50% { translate: -1px 0; }
100% { translate: 1px 0; }
}
/* ═══════════════════════════════════════════════════════════
契 · 鏈上對局 — 結算層
概念：契者剖之為二，各執其一，合則為證。
這是 state channel／commit-reveal 的字面隱喻，所以這區不做
科技卡片，做「被數位掃描過的古契牘」。
紋理是 feTurbulence 真的生成的（木纖維、印泥斑駁），
不是疊 gradient 假裝——那正是這區原本失敗的原因。
═══════════════════════════════════════════════════════════ */
#chain-section {
--ink: #0b0907; /* 墨底，暖黑不是純黑 */
--slip-lo: #241b13; /* 牘面暗部 */
--slip-hi: #35271a; /* 牘面亮部 */
--slip-edge: #4d3927; /* 削口 */
--cinnabar: #c4362e; /* 朱砂 */
--malachite: #6b9b73; /* 石綠 */
--gold-dust: #a8864f; /* 泥金 */
--silk: #d8c8a8; /* 絹色字 */
background: var(--ink);
overflow: hidden;
padding: 0;
}
/* 紋理定義用的 SVG 本身不佔版面 */
.chain-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ── 底層一：竹簾紋（抄紙時簾子留下的等距痕）＋ 展櫃頂燈 ── */
.chain-silk {
position: absolute;
inset: 0;
pointer-events: none;
background:
/* 文物打光：頂部一道斜射的燈，四周壓暗 */
radial-gradient(ellipse 78% 52% at 50% -6%,
rgba(216, 200, 168, .07) 0%,
rgba(168, 134, 79, .03) 42%,
transparent 72%),
repeating-linear-gradient(90deg,
rgba(216, 200, 168, .05) 0 1px,
transparent 1px 7px),
repeating-linear-gradient(90deg,
rgba(0, 0, 0, .3) 0 1px,
transparent 1px 41px);
}
/* ── 底層二：墨暈與水漬，破掉大面積死板 ── */
.chain-stain {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 46% 38% at 12% 22%, rgba(168, 134, 79, .09), transparent 70%),
radial-gradient(ellipse 30% 44% at 88% 74%, rgba(120, 60, 40, .10), transparent 72%),
radial-gradient(ellipse 60% 30% at 50% 108%, rgba(0, 0, 0, .55), transparent 70%),
radial-gradient(ellipse 70% 40% at 50% -8%, rgba(0, 0, 0, .5), transparent 68%);
}
.chain-frame {
position: relative;
z-index: 1;
/* 右側讓開固定在 right:28px 的 nav dots */
width: min(1300px, 100% - 128px);
margin: 0 auto;
padding: 34px 0;
display: flex;
flex-direction: column;
gap: 22px;
align-items: center;
}
/* ── 標頭 ── */
.chain-header { text-align: center; }
.chain-eyebrow {
display: block;
font-family: 'Orbitron', monospace;
font-size: .66rem;
letter-spacing: .34em;
color: var(--gold-dust);
opacity: .62;
margin-bottom: 12px;
}
.chain-title {
font-family: 'Noto Serif TC', 'Songti TC', 'STSong', serif;
font-size: clamp(2.1rem, 5vw, 3.4rem);
font-weight: 900;
letter-spacing: .32em;
text-indent: .32em; /* 補回 letter-spacing 造成的右偏 */
color: var(--silk);
text-shadow:
0 0 1px rgba(196, 54, 46, .5),
0 2px 18px rgba(0, 0, 0, .8);
}
.chain-sub {
margin-top: 12px;
font-family: 'Noto Serif TC', 'Songti TC', serif;
font-size: .92rem;
letter-spacing: .16em;
color: rgba(216, 200, 168, .5);
}
/* ── 牘架 ── */
.chain-rail {
display: flex;
gap: 22px;
width: 100%;
justify-content: center;
align-items: stretch;
}
/* ═══ 單片契牘 ═══ */
.tablet {
position: relative;
flex: 1 1 0;
min-width: 0;
max-width: 300px;
display: flex;
flex-direction: column;
gap: 11px;
/* 上方留給繩孔 */
padding: 34px 20px 18px;
/* 木色：不是均勻底色，左右邊緣較深，像削過的竹木 */
background:
linear-gradient(90deg,
rgba(0, 0, 0, .42) 0%,
transparent 7%,
transparent 93%,
rgba(0, 0, 0, .5) 100%),
linear-gradient(176deg, var(--slip-hi) 0%, var(--slip-lo) 58%, #1c140d 100%);
border: 1px solid var(--slip-edge);
/* 頂端削圓、底端平——竹簡的形狀 */
border-radius: 7px 7px 2px 2px;
box-shadow:
inset 0 1px 0 rgba(216, 200, 168, .11),
inset 0 -18px 26px rgba(0, 0, 0, .45),
0 14px 34px rgba(0, 0, 0, .62);
transition: transform .45s cubic-bezier(.22,.9,.28,1), box-shadow .45s, border-color .45s;
}
/* ── 木纖維：feTurbulence 縱向拉長（x 高頻 y 低頻＝順著長軸的纖維） ── */
.tablet-fiber {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
opacity: .3;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.014' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='320' filter='url(%23f)'/%3E%3C/svg%3E");
background-size: 220px 320px;
}
/* 纖維之上再壓一層細顆粒，避免看起來像印刷網點 */
.tablet-fiber::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
opacity: .5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* ── 蟲蛀與磨損：手放位置，不是隨機灑 ── */
.tablet-worm {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background:
radial-gradient(circle 2.4px at 84% 17%, rgba(0,0,0,.62), transparent 100%),
radial-gradient(circle 1.6px at 12% 44%, rgba(0,0,0,.5), transparent 100%),
radial-gradient(circle 3.1px at 73% 63%, rgba(0,0,0,.55), transparent 100%),
radial-gradient(circle 1.3px at 27% 81%, rgba(0,0,0,.45), transparent 100%),
/* 一道斜向折痕 */
linear-gradient(107deg,
transparent 0 42%,
rgba(0, 0, 0, .16) 42.4%,
rgba(216, 200, 168, .05) 42.9%,
transparent 43.4% 100%);
}
/* ── 界欄：古籍版框的左右邊欄，內側細線、外側粗線 ── */
.tablet-worm::before {
content: "";
position: absolute;
inset: 26px 9px 9px;
pointer-events: none;
border-left: 1px solid rgba(168, 134, 79, .16);
border-right: 1px solid rgba(168, 134, 79, .16);
box-shadow:
inset 3px 0 0 -2px rgba(168, 134, 79, .1),
inset -3px 0 0 -2px rgba(168, 134, 79, .1);
}
/* ── 底端磨損：牘立久了下緣先糊 ── */
.tablet-worm::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 26px;
pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .42));
-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 3px, rgba(0,0,0,.35) 3px 7px);
mask-image: repeating-linear-gradient(90deg, #000 0 3px, rgba(0,0,0,.35) 3px 7px);
}
/* ── 騎縫：契剖成兩半的那道齒口，在右緣 ── */
.tablet-tally {
position: absolute;
top: 16%;
right: -1px;
width: 7px;
height: 66%;
pointer-events: none;
background: var(--slip-edge);
opacity: .55;
/* 鋸齒：這是「合契」的接口 */
-webkit-mask-image: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 11px);
mask-image: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 11px);
transition: opacity .45s, transform .45s;
}
/* ── 繩孔與編繩：竹簡是用繩子編起來的 ── */
.tablet-cord {
position: absolute;
top: 13px;
left: 20px;
right: 20px;
height: 9px;
pointer-events: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.tablet-cord::before {
content: "";
position: absolute;
left: 4px;
right: 4px;
top: 50%;
height: 1.5px;
background:
repeating-linear-gradient(90deg,
rgba(168, 134, 79, .5) 0 3px,
rgba(90, 66, 38, .5) 3px 6px);
transform: translateY(-50%);
}
.tablet-cord i {
position: relative;
z-index: 1;
width: 7px;
height: 7px;
border-radius: 50%;
background: #0d0906;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, .9),
0 1px 0 rgba(216, 200, 168, .13);
}
/* ── 牘首：序號與鏈名 ── */
.tablet-head {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 9px;
border-bottom: 1px solid rgba(168, 134, 79, .22);
}
.tablet-ord {
font-family: 'Noto Serif TC', 'Songti TC', serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--gold-dust);
letter-spacing: .1em;
}
.tablet-chain {
font-family: 'Orbitron', monospace;
font-size: .55rem;
letter-spacing: .18em;
padding: 3px 7px;
color: rgba(216, 200, 168, .62);
border: 1px solid rgba(168, 134, 79, .3);
background: rgba(0, 0, 0, .3);
}
/* ── 牘文 ── */
.tablet-name {
position: relative;
z-index: 2;
font-family: 'Noto Serif TC', 'Songti TC', serif;
font-size: 1.32rem;
font-weight: 800;
letter-spacing: .1em;
line-height: 1.3;
color: var(--silk);
display: flex;
flex-direction: column;
}
.tablet-name small {
font-family: 'Orbitron', sans-serif;
font-size: .42em;
font-weight: 500;
letter-spacing: .14em;
color: rgba(168, 134, 79, .68);
margin-top: 6px;
}
.tablet-desc {
position: relative;
z-index: 2;
flex: 1;
font-size: .8rem;
line-height: 1.85;
letter-spacing: .02em;
color: rgba(216, 200, 168, .6);
}
/* ── 牘尾：印 + 狀態 ── */
.tablet-foot {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
padding-top: 12px;
border-top: 1px solid rgba(168, 134, 79, .18);
}
.tablet-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
min-width: 0;
}
.tablet-state {
font-family: 'Noto Serif TC', 'Songti TC', serif;
font-size: .64rem;
letter-spacing: .06em;
color: rgba(216, 200, 168, .5);
}
/* ═══ 朱砂印 ═══ */
.tablet-seal {
width: 54px;
height: 54px;
flex: none;
transition: transform .45s cubic-bezier(.22,.9,.28,1), opacity .45s;
}
.seal-frame {
fill: none;
stroke: var(--cinnabar);
stroke-width: 3.2;
}
.seal-glyph {
fill: var(--cinnabar);
font-family: 'Noto Serif TC', 'Songti TC', 'STSong', serif;
font-size: 38px;
font-weight: 700;
text-anchor: middle;
}
/* 已成契：印蓋實了，微微歪一點（手蓋的印不會完全正） */
.tablet--sealed .tablet-seal { transform: rotate(-4.5deg); opacity: .96; }
.tablet--sealed .tablet-state { color: var(--malachite); }
/* 契未合：印還沒落下——位置先留著，框是虛的、字是空的 */
.tablet--unsealed .tablet-seal { opacity: .46; transform: rotate(0deg); }
.tablet--unsealed .seal-frame { stroke-dasharray: 5 4; stroke-width: 2; }
.tablet--unsealed .seal-glyph {
fill: none;
stroke: var(--cinnabar);
stroke-width: 1.1;
opacity: .85;
}
.tablet--unsealed .tablet-state { color: rgba(168, 134, 79, .72); }
/* ── 行動 ── */
.tablet-cta {
font-family: 'Noto Serif TC', 'Songti TC', serif;
font-size: .76rem;
font-weight: 700;
letter-spacing: .14em;
text-decoration: none;
padding: 7px 15px;
color: var(--silk);
background: linear-gradient(180deg, #7d2820 0%, #5e1d16 100%);
border: 1px solid rgba(196, 54, 46, .55);
border-radius: 2px;
white-space: nowrap;
transition: background .3s, box-shadow .3s, transform .3s;
}
.tablet-cta:hover {
background: linear-gradient(180deg, #a52d24 0%, #7d2820 100%);
box-shadow: 0 5px 16px rgba(196, 54, 46, .35);
transform: translateY(-1px);
}
/* 待合契：刻痕未完成的樣子，明確不可點 */
.tablet-cta--off {
color: rgba(216, 200, 168, .38);
background: transparent;
border: 1px dashed rgba(168, 134, 79, .34);
cursor: default;
}
.tablet-cta--off:hover { background: transparent; box-shadow: none; transform: none; }
/* ═══ 數位掃描：讓古物跟這個賽博站接得起來 ═══ */
.tablet::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
/* 極淡的掃描線，靜態時幾乎看不見 */
background: repeating-linear-gradient(180deg,
rgba(216, 200, 168, .028) 0 1px,
transparent 1px 3px);
opacity: .5;
transition: opacity .45s;
}
/* ── hover：牘抬起、印落下、掃描線亮起 ── */
.tablet:hover {
transform: translateY(-8px);
border-color: rgba(168, 134, 79, .6);
box-shadow:
inset 0 1px 0 rgba(216, 200, 168, .16),
inset 0 -18px 26px rgba(0, 0, 0, .4),
0 22px 46px rgba(0, 0, 0, .7),
0 0 26px rgba(168, 134, 79, .14);
}
.tablet:hover::after { opacity: 1; }
.tablet:hover .tablet-tally { opacity: .9; transform: translateX(2px); }
/* 已成契的牘：hover 時印像剛被壓下去 */
.tablet--sealed:hover .tablet-seal { transform: rotate(-4.5deg) scale(1.06); }
/* 未成契的牘：hover 時印稍微顯形，但仍是虛的 */
.tablet--unsealed:hover .tablet-seal { opacity: .48; }
/* ── 手機輪播圓點（名稱刻意避開 nav 的 .chain-dot）── */
.chain-dots { display: none; gap: 9px; }
.chain-carousel-dot {
width: 7px;
height: 7px;
padding: 0;
border: 1px solid rgba(168, 134, 79, .55);
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: background .25s, transform .25s;
}
.chain-carousel-dot.active { background: var(--cinnabar); border-color: var(--cinnabar); transform: scale(1.35); }
/* ═══════════════════════════════════════════════════════════
更多作品 — 已上線的其餘作品索引
低調的檔案索引，用站的既有綠終端語言，不再發明第三種風格
═══════════════════════════════════════════════════════════ */
/* 不設底色，讓固定在後面的星空 canvas 透上來 */
#more-section { padding: 0; }
.more-frame {
position: relative;
z-index: 1;
width: min(1200px, 100% - 128px);
margin: 0 auto;
padding: 30px 0;
display: flex;
flex-direction: column;
gap: 22px;
}
.more-header { text-align: center; }
.more-eyebrow {
display: block;
font-family: 'Orbitron', monospace;
font-size: .64rem;
letter-spacing: .3em;
color: var(--green);
opacity: .6;
margin-bottom: 10px;
}
.more-title {
font-family: 'Orbitron', sans-serif;
font-size: clamp(1.7rem, 4vw, 2.6rem);
font-weight: 900;
letter-spacing: .14em;
color: #fff;
text-shadow: 0 0 22px rgba(0, 255, 65, .3);
}
.more-sub {
margin-top: 8px;
font-size: .86rem;
letter-spacing: .06em;
color: rgba(255, 255, 255, .42);
}
/* 十八格得塞進一屏——section 是 100vh 且不可捲，溢出就是被裁掉。
用 auto-fill 讓欄數跟著寬度走，不寫死欄數。 */
.more-grid {
display: grid;
/* 178px 讓 1280 寬排成 6 欄 3 列；4 列以上在 720 高的視窗會溢出 */
grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
gap: 10px;
}
.more-item {
position: relative;
display: flex;
flex-direction: column;
gap: 5px;
padding: 12px 12px 11px;
text-decoration: none;
background: rgba(5, 15, 8, .5);
border: 1px solid rgba(0, 255, 65, .16);
border-radius: 4px;
overflow: hidden;
transition: transform .3s cubic-bezier(.25,.8,.25,1), border-color .3s, background .3s;
}
/* 左緣一道綠燈，hover 時整條亮起 */
.more-item::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--green);
opacity: .28;
transition: opacity .3s;
}
.more-item:hover {
transform: translateY(-4px);
border-color: rgba(0, 255, 65, .6);
background: rgba(5, 22, 10, .72);
}
.more-item:hover::before { opacity: 1; }
.more-idx {
font-family: 'Orbitron', monospace;
font-size: .58rem;
letter-spacing: .18em;
color: rgba(0, 255, 65, .5);
}
.more-name {
font-family: 'Orbitron', 'Noto Sans TC', sans-serif;
font-size: .88rem;
font-weight: 700;
letter-spacing: .03em;
line-height: 1.25;
color: #fff;
display: flex;
flex-direction: column;
}
.more-name small {
font-size: .56em;
font-weight: 500;
letter-spacing: .12em;
color: rgba(255, 255, 255, .34);
margin-top: 3px;
}
.more-desc {
flex: 1;
font-size: .69rem;
line-height: 1.6;
color: rgba(255, 255, 255, .5);
/* 描述長短不一，夾成兩行讓每格等高、列高可預測 */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.more-tag {
font-family: 'Orbitron', monospace;
font-size: .52rem;
letter-spacing: .13em;
color: rgba(0, 255, 65, .55);
padding-top: 6px;
border-top: 1px solid rgba(0, 255, 65, .12);
}
/* nav dot 配色 */
.dot.more-dot.active {
background: var(--green);
border-color: var(--green);
box-shadow: 0 0 12px var(--green), 0 0 24px rgba(0, 243, 255, .5);
}
/* RESPONSIVE */
@media (max-width: 1200px) {
.cabinet-row { gap: 22px; }
.cabinet { width: 300px; min-height: 490px; }
.cabinet-name { font-size: 1.35rem; }
}
@media (max-width: 1080px) {
.cabinet-row { gap: 18px; max-width: none; }
.cabinet { width: 270px; min-height: 470px; }
.cabinet-name { font-size: 1.22rem; }
.cabinet-desc { font-size: .8rem; }
.cabinet-feats li { font-size: .72rem; }
}
@media (max-width: 980px) {
.cabinet-row { gap: 18px; }
.cabinet { width: 84vw; max-width: 360px; }
.arcade-frame { gap: 18px; padding: 30px 18px; }
}
/* ═══════════════════════════════════════════════════════════
📱 ARCADE MOBILE — 水平 snap-scroll 輪播
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* 收緊 frame */
.arcade-frame { gap: 14px; padding: 20px 0; justify-content: flex-start; }
/* Header 縮小 */
.arcade-eyebrow { font-size: .68rem; letter-spacing: .25em; }
.arcade-marquee { font-size: 1.8rem; letter-spacing: .1em; margin: 8px 0 6px; }
.arcade-subtitle { font-size: .75rem; letter-spacing: .15em; }
/* 核心：水平 snap-scroll */
.cabinet-row {
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
gap: 0;
padding: 0 10vw;
max-width: 100vw;
scrollbar-width: none;
}
.cabinet-row::-webkit-scrollbar { display: none; }
/* Cabinet 輪播尺寸 */
.cabinet {
flex: 0 0 80vw;
width: 80vw;
max-width: 340px;
min-height: auto;
scroll-snap-align: center;
margin: 0 10px;
}
/* 機台內部縮小 */
.cabinet-marquee-strip { padding: 10px 8px; font-size: .78rem; }
.cabinet-screen { margin: 10px 10px 6px; }
.cabinet-screen-inner { padding: 16px 14px 14px; gap: 8px; }
.cabinet-tag { font-size: .62rem; padding: 4px 8px; }
.cabinet-ver { font-size: .55rem; }
.cabinet-name { font-size: 1.2rem; }
.cabinet-name small { font-size: .45em; margin-top: 3px; }
.cabinet-desc { font-size: .82rem; line-height: 1.5; }
.cabinet-feats li { font-size: .7rem; line-height: 1.7; }
.cabinet-controls { padding: 10px 18px 8px; }
.cabinet-joystick { width: 36px; height: 36px; }
.cabinet-buttons span { width: 20px; height: 20px; }
.cabinet-coinslot { padding: 10px; font-size: .82rem; }
/* 觸控優化：取消 hover 浮起，改為按壓回饋 */
.cabinet:hover,
.cabinet:focus-visible {
transform: none;
filter: none;
box-shadow:
0 0 18px rgba(0, 0, 0, .6),
0 0 30px var(--neon),
inset 0 0 28px rgba(0, 0, 0, .8),
0 22px 50px rgba(0, 0, 0, .85);
}
.cabinet:active {
transform: scale(0.97);
transition-duration: .08s;
filter: brightness(1.25) saturate(1.3);
}
/* 閃電調整 */
svg.lightning-bolt { width: 160px; }
.lightning-flash { height: 22%; }
/* 輪播圓點 */
.carousel-dots {
display: flex;
justify-content: center;
gap: 10px;
padding: 12px 0 0;
}
.carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, .25);
border: 1px solid rgba(255, 255, 255, .35);
transition: all .3s ease;
cursor: pointer;
padding: 0;
}
.carousel-dot.active {
background: var(--magenta);
border-color: var(--magenta);
box-shadow: 0 0 8px var(--magenta), 0 0 16px var(--magenta);
transform: scale(1.3);
}
/* 滑動提示 */
@keyframes swipe-hint {
0% { transform: translateX(0); opacity: 1; }
40% { transform: translateX(-30px); opacity: 1; }
70% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(0); opacity: 0; }
}
.cabinet-row.show-hint .cabinet:first-child {
animation: swipe-hint 1.2s ease-in-out 0.8s 1 both;
}
/* synthwave 背景微調 */
.synthwave-sun { width: 240px; height: 240px; }
/* 👾 手機版怪物 — 縮小 + 降低高度 */
.arcade-creatures { height: 80px; bottom: 2px; }
.creature { transform-origin: bottom center; }
.creature--zombie { width: 28px; height: 46px; }
.creature--slime { width: 32px; height: 24px; }
.creature--fighter { width: 52px; height: 46px; }
.creature--lf2-firen { width: 52px; height: 46px; }
.creature--zombie-2 { width: 24px; height: 40px; }
.creature--creeper { width: 26px; height: 42px; }
.creature--skeleton { width: 34px; height: 42px; }
.creature--slime-red { width: 28px; height: 20px; }
/* 火焰軌跡縮小 */
.creature--lf2-firen::before { width: 120px; height: 8px; }
.creature--lf2-firen::after { display: none; }
/* 骷髏箭縮小 */
.creature--skeleton::after { width: 14px; height: 4px; }
/* 遠景怪物在手機上隱藏，只留前景+中景 */
.creature--creeper, .creature--zombie-2 { display: none; }
}
@media (max-width: 480px) {
.arcade-marquee { font-size: 1.5rem; letter-spacing: .08em; }
.cabinet { flex: 0 0 88vw; width: 88vw; }
.cabinet-name { font-size: 1.1rem; }
.synthwave-sun { width: 200px; height: 200px; }
}
/* ═══════════════════════════════════════════════════════════
契 · 鏈上對局 + 更多作品 — RESPONSIVE
═══════════════════════════════════════════════════════════ */
/* 欄數交給 auto-fill，不寫死；中等寬度會掉到 4-5 欄＝多一兩列，
此時描述夾成一行把列高壓回來，避免超出一屏。 */
@media (max-width: 1180px) {
.more-desc { -webkit-line-clamp: 1; }
.more-item { padding: 10px 10px 9px; gap: 4px; }
}
@media (max-width: 1080px) {
.chain-rail { gap: 16px; }
.tablet { padding: 32px 16px 16px; }
.tablet-name { font-size: 1.18rem; }
.tablet-desc { font-size: .77rem; line-height: 1.75; }
.tablet-seal { width: 46px; height: 46px; }
}
@media (max-width: 900px) {
/* 桌機四片牘擠不下 → 改水平 snap；此時滿版，靠 rail 自己的 padding 留白 */
.chain-frame { width: 100%; padding: 26px 0; gap: 18px; }
.chain-header { padding: 0 20px; }
.chain-rail {
justify-content: flex-start;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 8px 50vw 8px 20px;
gap: 16px;
}
.chain-rail::-webkit-scrollbar { display: none; }
.tablet {
flex: 0 0 78vw;
max-width: 340px;
scroll-snap-align: center;
}
/* 觸控沒有 hover，改掉浮起避免殘留狀態卡住 */
.tablet:hover { transform: none; }
.chain-dots { display: flex; }
.more-frame { width: 100%; padding: 26px 20px; }
.more-grid { grid-template-columns: repeat(2, 1fr); }
.more-item:hover { transform: none; }
}
@media (max-width: 768px) {
.chain-title { font-size: 2rem; letter-spacing: .26em; text-indent: .26em; }
.chain-eyebrow { font-size: .6rem; letter-spacing: .26em; }
.chain-sub { font-size: .8rem; padding: 0 10px; letter-spacing: .1em; }
.tablet { flex: 0 0 84vw; }
/* 十八格必須擠進一屏——section 是 100vh 且不可捲，溢出等於被裁掉。
手機只留名稱與標籤：描述與英文副名都拿掉，才容得下 667px 高的螢幕。 */
/* 左右各留 26px：nav dots 固定在 right:10px 且寬約 13px，
滿版兩欄網格會直接被圓點壓在上面 */
.more-frame { padding: 12px 26px; gap: 8px; }
.more-title { font-size: 1.3rem; }
.more-eyebrow { font-size: .52rem; margin-bottom: 4px; }
.more-sub { font-size: .68rem; margin-top: 4px; }
.more-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.more-item { padding: 7px 8px; gap: 2px; border-radius: 3px; }
.more-idx { display: none; }
.more-name { font-size: .74rem; }
.more-name small { display: none; }
.more-desc { display: none; }
.more-tag { font-size: .45rem; padding-top: 3px; letter-spacing: .08em; border-top: none; }
}
@media (max-width: 480px) {
.chain-title { font-size: 1.65rem; }
.tablet { flex: 0 0 88vw; }
.tablet-name { font-size: 1.08rem; }
.tablet-desc { font-size: .76rem; }
.tablet-cta { font-size: .7rem; padding: 6px 12px; }
.tablet-seal { width: 42px; height: 42px; }
/* 仍維持兩欄：單欄會把十八格拉成兩倍高，直接溢出一屏 */
.more-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; }
.more-item { padding: 6px 7px; }
.more-name { font-size: .7rem; }
.more-tag { font-size: .43rem; }
}