/* ======================================================================
보드-판 아케이드 스킨 (메인 화면 전용)
pixel.css → pixel-skin.css 위에 한 겹 더 얹는다. 이 파일은 index.html
에서만 불러서, 게임 화면은 지금 색을 그대로 쓴다.
← 맨 마지막
pixel-skin 이 .hero 와 .g-thumb 배경을 !important 로 못박아 두었다.
같은 세기면 나중에 온 쪽이 이기므로 여기서도 !important 를 쓴다.
빼고 싶으면 이 한 줄만 지우면 예전 화면으로 돌아온다.
====================================================================== */
/* 색은 pixel.css 의 --ar-* 를 쓴다 (게임 입장 화면과 공유).
히어로 그라데이션 두 색만 여기서만 쓰이므로 여기 둔다. */
:root { --ar-mag: #C0429B; --ar-vio: #6E36A8; }
body { background-color: var(--ar-night); }
/* 큰 게임 그림이 바탕에 아주 옅게 비치게 — 빈 보라 화면이 심심해서 넣는다.
배경 이미지에는 투명도를 못 주므로 겹 하나를 고정으로 깔고 그 겹을 흐린다. */
body::before {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background: url("/yacht-icon.svg?v=202609021322") repeat;
background-size: 132px 132px;
image-rendering: pixelated;
opacity: .045;
}
/* ── 머리줄 ─────────────────────────────────────────────────────────── */
header { background: var(--ar-panel) !important; border-bottom: 3px solid var(--ar-ink) !important; }
.h-inner { max-width: 1180px; }
/* 로고도 아케이드 간판처럼 틀 안에 넣는다 */
.brand {
background: #3A2158; border: 2px solid var(--px-ink);
box-shadow: 0 3px 0 0 var(--ar-ink);
padding: 5px 12px 5px 8px;
}
.h-link, .h-btn {
background: #3A2158; border: 2px solid var(--px-ink);
box-shadow: 0 3px 0 0 var(--ar-ink);
color: var(--px-cream);
}
.h-link:hover, .h-btn:hover { background: #4C2C72; color: var(--px-white); }
.h-link:active, .h-btn:active { transform: translateY(3px); box-shadow: none; }
.h-sep { display: none; }
.h-nav { gap: 8px; }
/* ── 히어로: 전구 간판 ──────────────────────────────────────────────── */
.hero {
background: linear-gradient(150deg, var(--ar-vio) 0%, var(--ar-mag) 62%, #E0559B 100%) !important;
border-bottom: 3px solid var(--ar-ink);
padding: 34px 20px 30px;
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center; gap: 26px;
}
/* 색종이 — 16비트라 네모다. 겹마다 위치·색을 따로 준다. */
.hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-repeat: no-repeat;
background-size: 7px 7px, 6px 6px, 8px 8px, 6px 6px, 7px 7px, 8px 8px,
6px 6px, 7px 7px, 6px 6px, 8px 8px, 7px 7px, 6px 6px;
background-position: 6% 18%, 14% 62%, 21% 30%, 30% 80%, 38% 12%, 47% 68%,
58% 22%, 66% 74%, 74% 34%, 83% 60%, 90% 16%, 96% 46%;
background-image:
linear-gradient(#FFE8A0,#FFE8A0), linear-gradient(#7ED8F0,#7ED8F0),
linear-gradient(#FF8FB8,#FF8FB8), linear-gradient(#A8F08A,#A8F08A),
linear-gradient(#FFE8A0,#FFE8A0), linear-gradient(#FFFFFF,#FFFFFF),
linear-gradient(#7ED8F0,#7ED8F0), linear-gradient(#FF8FB8,#FF8FB8),
linear-gradient(#A8F08A,#A8F08A), linear-gradient(#FFE8A0,#FFE8A0),
linear-gradient(#FFFFFF,#FFFFFF), linear-gradient(#7ED8F0,#7ED8F0);
}
.marquee {
position: relative; z-index: 1;
background: #3A1258;
border: 3px solid var(--px-ink);
box-shadow: 6px 6px 0 0 rgba(13,8,24,.55);
padding: 30px 42px 26px;
max-width: 560px; text-align: center;
}
/* 전구 테두리. 네 변에 반복 무늬를 한 겹씩 깐다 — 이미지 없이 CSS 만으로. */
.marquee::before {
content: ""; position: absolute; inset: 7px; pointer-events: none;
background-repeat: no-repeat;
background-position: top left, bottom left, left top, right top;
background-size: 100% 6px, 100% 6px, 6px 100%, 6px 100%;
background-image:
repeating-linear-gradient(90deg, var(--ar-bulb) 0 6px, transparent 6px 18px),
repeating-linear-gradient(90deg, var(--ar-bulb) 0 6px, transparent 6px 18px),
repeating-linear-gradient(180deg, var(--ar-bulb) 0 6px, transparent 6px 18px),
repeating-linear-gradient(180deg, var(--ar-bulb) 0 6px, transparent 6px 18px);
animation: arBulb 1.4s steps(1, end) infinite;
}
@keyframes arBulb { 0%, 49% { opacity: 1 } 50%, 100% { opacity: .4 } }
@media (prefers-reduced-motion: reduce) { .marquee::before { animation: none } }
.hero h1 {
font-size: clamp(20px, 4.4vw, 33px); line-height: 1.35;
color: #FFE8A0 !important;
text-shadow: 3px 3px 0 var(--px-ink) !important;
margin-bottom: 10px;
}
.hero p { color: #F2D8F0 !important; font-size: 13px; text-shadow: 2px 2px 0 rgba(13,8,24,.7); }
/* 간판 양옆에 서 있는 말들 */
.hero-cast { display: flex; align-items: flex-end; gap: 6px; z-index: 1; flex-shrink: 0; }
.hero-cast img {
width: 46px; height: 46px; image-rendering: pixelated;
filter: drop-shadow(3px 3px 0 rgba(13,8,24,.5));
}
.hero-cast img:nth-child(2) { width: 60px; height: 60px; }
.hero-cast img:nth-child(3) { width: 40px; height: 40px; }
/* ── 본문 ───────────────────────────────────────────────────────────── */
main { max-width: 1180px; }
.sh h2 { color: var(--px-cream); text-shadow: 2px 2px 0 var(--px-ink); }
.sh-pill { background: var(--ar-blue) !important; color: #fff !important; border: 2px solid var(--px-ink); }
/* ── 게임 카드 ──────────────────────────────────────────────────────── */
.game-grid { gap: 22px; }
.game-card {
background: var(--ar-panel) !important;
border: 3px solid var(--ar-frame) !important;
box-shadow: 5px 5px 0 0 var(--ar-ink) !important;
padding: 5px;
}
.game-card.playable:hover {
border-color: var(--ar-bulb) !important;
box-shadow: 8px 8px 0 0 var(--ar-ink) !important;
}
/* 썸네일: 아이콘 하나만 떠 있던 것을 판 위에 올려 한 장면처럼 만든다.
그림 파일을 새로 그리는 대신 판 무늬는 CSS 로 깐다 — 색만 바꾸면 되고
화면 크기를 타지 않는다. */
.g-thumb {
height: 168px;
border: 2px solid var(--px-ink) !important;
image-rendering: pixelated;
}
/* 아이콘이 32칸이라 128 = 4배, 96 = 3배. 배수가 아니면 도트가 들쭉날쭉해진다. */
.g-thumb img { width: 128px; height: 128px; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.45)) !important; }
.g-thumb.c-yut { background: #24407A !important; background-image:
repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 4px, transparent 4px 24px) !important; }
.g-thumb.c-omok { background: #8C5E30 !important; background-image:
repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 3px, transparent 3px 20px) !important; }
.g-thumb.c-yacht { background: #4A2478 !important; background-image:
repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 6px, transparent 6px 18px) !important; }
.g-thumb.c-chess { background: #2F2A42 !important; background-image:
repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 6px, transparent 6px 18px) !important; }
.g-thumb.c-domino { background: #5A4426 !important; background-image:
repeating-linear-gradient(180deg, rgba(28,30,50,.35) 0 2px, transparent 2px 16px) !important; }
.g-thumb.c-alka { background: #7A3A22 !important; background-image:
repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 3px, transparent 3px 22px) !important; }
.g-thumb.c-carom { background: #2E5E5A !important; background-image:
repeating-linear-gradient(180deg, rgba(0,0,0,.14) 0 3px, transparent 3px 22px) !important; }
.g-thumb.c-ddakji { background: #C8B48C !important; background-image:
repeating-linear-gradient(90deg, rgba(28,30,50,.18) 0 3px, transparent 3px 26px) !important; }
.g-thumb.c-soccer { background: #2E7A44 !important; background-image:
repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 4px, transparent 4px 30px) !important; }
.g-thumb.c-pong { background: #14375E !important; background-image:
repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 6px, transparent 6px 18px) !important; }
.status-live {
top: 8px; left: 8px;
background: #2FA85A !important; color: #fff !important;
border: 2px solid var(--px-ink); box-shadow: 2px 2px 0 0 var(--px-ink);
font-size: 10px; letter-spacing: .08em;
}
.g-body { padding: 14px 12px 12px; }
.g-title { font-size: 17px; color: var(--px-cream); }
.g-desc { color: var(--px-shade); }
.g-foot { align-items: center; gap: 10px; }
.g-tag {
background: #2A3564 !important; color: #A8BCF0 !important;
border: 2px solid var(--px-ink) !important; font-size: 10px; padding: 3px 7px;
}
.g-tag.live { background: var(--ar-blue) !important; color: #fff !important; }
/* 동그란 화살표를 아케이드 단추로 바꾼다 (글자는 HTML 쪽에서 「플레이」로) */
.g-arrow {
width: auto; height: auto;
background: var(--ar-red); color: #fff;
border: 2px solid var(--px-ink);
box-shadow: 0 4px 0 0 var(--ar-red-lo);
padding: 8px 16px; font-size: 14px; font-weight: 700;
letter-spacing: .04em; white-space: nowrap;
}
.game-card.playable:hover .g-arrow { transform: none; background: #EE5A48; }
.game-card.playable:active .g-arrow { transform: translateY(4px); box-shadow: none; }
/* 아직 안 나온 게임 */
.soon-chip {
background: var(--ar-panel) !important;
border: 2px solid var(--ar-frame) !important;
color: var(--px-cream) !important;
}
/* ── 소개·가이드·바닥 ───────────────────────────────────────────────── */
.guide-card { background: var(--ar-panel) !important; border: 3px solid #3A2158 !important; box-shadow: 4px 4px 0 0 var(--ar-ink); }
.guide-card:hover { border-color: var(--ar-frame) !important; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--ar-ink); }
footer { background: var(--ar-panel); border-top: 3px solid var(--ar-ink); }
/* ── 좁은 화면 ──────────────────────────────────────────────────────── */
@media (max-width: 860px) { .hero-cast { display: none } }
@media (max-width: 640px) {
.hero { padding: 22px 14px 20px; }
.marquee { padding: 20px 16px 18px; border-width: 2px; }
.marquee::before { inset: 5px; background-size: 100% 4px, 100% 4px, 4px 100%, 4px 100%; }
.game-grid { gap: 12px; }
.g-thumb { height: 118px; }
.g-thumb img { width: 96px; height: 96px; }
.g-title { font-size: 14px; }
/* 좁은 카드에 꼬리표 세 개와 단추를 한 줄로 넣으면 꼬리표가 세 줄로 접힌다.
아래로 쌓고 단추를 카드 폭만큼 늘려 누를 곳을 키운다. */
.g-foot { flex-direction: column; align-items: stretch; gap: 8px; }
.g-arrow { padding: 8px 10px; font-size: 13px; text-align: center; }
}