/* 푱케이드 — 2000년대 플래시 게임 포털 감성: 남색 바탕, 입체 테두리 상자, 노란 강조, 픽셀 글꼴 */
:root{
  --bg:#14183a;
  --bg-2:#1c2150;
  --panel:#262c64;
  --panel-2:#323a7c;
  --hi:#5865c8;      /* 입체 테두리 밝은 쪽 */
  --lo:#0b0d24;      /* 입체 테두리 어두운 쪽 */
  --ink:#f3f1ff;
  --muted:#aeb4e6;
  --yellow:#ffd23f;
  --pink:#ff4f8b;
  --cyan:#45e0ff;
  --green:#7dff6a;
  --pixel:'Galmuri11','Malgun Gothic',monospace;
  --body:system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 var(--body);
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:14px 14px}
a{color:var(--cyan)}
a:hover{color:var(--yellow)}
img{max-width:100%;display:block}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;z-index:9;background:var(--yellow);color:#000;padding:6px 10px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* 상단 */
.top{background:linear-gradient(#2b3390,#1a1f5c);border-bottom:4px solid var(--lo);box-shadow:inset 0 -2px 0 var(--hi)}
.top-in{max-width:1180px;margin:0 auto;padding:14px 16px 10px;display:flex;align-items:center;gap:20px}
.logo{text-decoration:none;display:flex;flex-direction:column;line-height:1;flex:none}
.logo-ko{font:32px var(--pixel);color:var(--yellow);text-shadow:3px 3px 0 var(--pink),6px 6px 0 var(--lo);letter-spacing:1px}
.logo-en{font:11px var(--pixel);color:var(--cyan);letter-spacing:4px;margin-top:8px}
.marquee{flex:1;min-width:0;overflow:hidden;white-space:nowrap;margin:0;background:var(--lo);border:2px inset var(--hi);padding:4px 0;font:13px var(--pixel);color:var(--green)}
.marquee span{display:inline-block;padding-left:100%;animation:marq 22s linear infinite}
@keyframes marq{to{transform:translateX(-100%)}}
.top-act{flex:none;display:flex;gap:8px;align-items:center}
.lang{flex:none;display:flex;gap:2px;font:13px var(--pixel)}
.lang a{color:var(--ink);text-decoration:none;padding:5px 9px 4px;background:var(--panel);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.lang a:hover{color:var(--yellow)}
.lang a[aria-current]{background:var(--yellow);color:#1a1300;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
/* 모든 게임: 맨 위 KO·EN 옆 버튼 → 아래로 썸네일 격자 메뉴 */
.nav-all{flex:none;font:13px var(--pixel);color:var(--ink);padding:5px 10px 4px;background:var(--panel);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);white-space:nowrap;cursor:pointer}
.nav-all:hover,.nav-all[aria-expanded="true"]{background:var(--yellow);color:#1a1300}
.nav-all[aria-expanded="true"] i{display:inline-block;transform:rotate(180deg)}
@media (max-width:520px){.nav-all .t{display:none}} /* 좁은 화면: 🎮 ▾ 만 */
.top{position:relative}
.allmenu{position:absolute;left:0;right:0;top:100%;z-index:60;padding:0 16px}
.allmenu-in{max-width:1148px;margin:0 auto;max-height:70vh;overflow:auto;padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;background:var(--panel);border:3px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.allmenu a{display:flex;flex-direction:column;gap:5px;color:var(--ink);text-decoration:none;font:13px var(--pixel);min-width:0}
.allmenu img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border:2px solid var(--lo)}
.allmenu span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.allmenu a:hover span,.allmenu a[aria-current] span{color:var(--yellow)}
.allmenu a[aria-current] img{outline:3px solid var(--yellow);outline-offset:-3px}
@media (max-width:760px){.allmenu-in{grid-template-columns:repeat(2,minmax(0,1fr))}}

.wrap{max-width:1180px;margin:0 auto;padding:18px 16px 30px}

/* 입체 상자 */
.box{background:var(--panel);border:3px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);padding:14px;margin-bottom:18px}
.box-title{margin:-14px -14px 14px;padding:6px 12px;background:linear-gradient(90deg,var(--pink),#a83cff);font:16px var(--pixel);display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-bottom:3px solid var(--lo)}
.box-title small{font-size:12px;opacity:.85}

/* 메인 */
.home-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px}
.home-top .box{margin-bottom:18px}
.new-list{list-style:none;margin:0;padding:0}
.new-list li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed var(--hi)}
.new-list li::before{content:'▸';color:var(--yellow);margin-right:4px}
.new-list a{flex:1;color:var(--ink);text-decoration:none}
.new-list a:hover{color:var(--yellow)}
.new-list time{font:12px var(--pixel);color:var(--muted)}
.notice{margin-top:14px;background:var(--bg-2);border:2px dashed var(--yellow);padding:10px 12px;font-size:14px}
.notice b{font-family:var(--pixel);color:var(--yellow)}
.notice p{margin:4px 0 0}
.intro p{margin:0 0 8px;color:var(--muted)}

/* 게임 카드 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--bg-2);border:3px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);transition:transform .12s}
.card:hover{transform:translateY(-3px);border-color:var(--yellow);color:var(--ink)}
.thumb{position:relative;aspect-ratio:1200/630;overflow:hidden;background:var(--lo)}
.thumb img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.card-body{padding:8px 10px 10px;display:flex;flex-direction:column;gap:2px}
.card-body b{font:16px var(--pixel);color:var(--yellow)}
.card-body small{font-size:12px;color:var(--cyan)}
.card-desc{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-big .card-body b{font-size:22px}
.card-big .card-desc{font-size:15px;-webkit-line-clamp:3}
.burst{position:absolute;top:8px;right:8px;font:13px var(--pixel);color:#1a1300;background:var(--yellow);padding:6px 8px;transform:rotate(8deg);
  clip-path:polygon(50% 0,61% 18%,82% 8%,80% 30%,100% 38%,84% 54%,96% 76%,74% 76%,68% 100%,50% 84%,32% 100%,26% 76%,4% 76%,16% 54%,0 38%,20% 30%,18% 8%,39% 18%);
  padding:16px 14px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{background:var(--pink);color:#fff}}

/* 장르 버튼 */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.chip{font:14px var(--pixel);color:var(--ink);background:var(--bg-2);border:2px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);padding:6px 12px;cursor:pointer}
.chip small{font-size:12px;opacity:.7;margin-left:2px}
.chip:hover{border-color:var(--yellow)}
.chip[aria-pressed="true"]{background:var(--yellow);color:#1a1300;border-color:#fff3b0 #8a6a00 #8a6a00 #fff3b0}
.card[hidden]{display:none}

/* 시리즈 칸 */
.series{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:center}
.series-art{width:100%;height:auto;border:3px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);background:#252b44}
.series p{margin:0 0 10px;color:#dcdcf5}
.series-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.series-list a{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 10px;background:var(--bg-2);border:2px solid var(--hi);text-decoration:none;color:var(--ink)}
.series-list a:hover{border-color:var(--yellow)}
.series-list b{font:16px var(--pixel);color:var(--yellow)}
.series-list small{font-size:12px;color:var(--cyan);white-space:nowrap}

/* 광고 */
.ad{position:relative;margin:0 0 18px;text-align:center}
.ad-label{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.ad-dev{display:grid;place-items:center;border:2px dashed var(--muted);color:var(--muted);font:13px var(--pixel)}
/* 자리 크기 = 애드센스 표준 중 가장 작은 쪽: 가로 728×90 (모바일 320×50), 직사각형 300×250 */
.ad-h{max-width:728px;margin-left:auto;margin-right:auto}
.ad-h.ad-dev{height:90px}
.ad-rect{max-width:300px}
.ad-rect.ad-dev{height:250px}
.ad-grid{grid-column:1/-1;width:100%;margin:0 auto}
/* 모바일 게임 창 아래 광고: PC 에서는 숨김. PLAY 버튼과 실수로 같이 눌리지 않게 위로 24px 띄움 */
.ad-mobile{display:none}

/* 게임 화면 */
.crumb{font-size:13px;color:var(--muted);margin-bottom:10px}
.crumb a{color:var(--muted)}
.play-area{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;justify-content:center;margin-bottom:18px}
.play-area .ad-side{width:300px;flex:none}
/* 가로 게임은 폭이 넓어 옆 광고를 게임 아래로 */
.play-area.wide .ad-side{width:100%}
.window{flex:0 1 auto;background:#c3c3c3;border:3px solid;border-color:#fff #404040 #404040 #fff;padding:3px;box-shadow:6px 6px 0 var(--lo)}
.titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(90deg,#000080,#1084d0);color:#fff;padding:3px 4px 3px 8px;font:13px var(--pixel)}
.tb-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-btns{display:flex;gap:3px;flex:none}
.tb-btn{width:26px;height:22px;display:grid;place-items:center;background:#c3c3c3;color:#000;border:2px solid;border-color:#fff #404040 #404040 #fff;font:14px/1 var(--body);text-decoration:none;cursor:pointer;padding:0}
.tb-btn:active{border-color:#404040 #fff #fff #404040}
.tb-btn:hover{color:#000;background:#d8d8d8}
.screen{position:relative;margin-top:3px;background:#000;
  /* 게임 원래 비율 유지: 원래 크기 · 화면 높이 · 화면 폭 중 가장 작은 쪽에 맞춤 */
  width:min(calc(var(--fw) * 1px),calc((100vh - 150px) * var(--fw) / var(--fh)),calc(100vw - 50px));aspect-ratio:var(--fw)/var(--fh)}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.start{position:absolute;inset:0;width:100%;border:0;padding:0;cursor:pointer;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden}
.start img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;filter:blur(2px)}
.start-btn{position:relative;font:28px var(--pixel);color:#1a1300;background:var(--yellow);padding:14px 26px;border:4px solid;border-color:#fff3b0 #8a6a00 #8a6a00 #fff3b0;animation:pulse 1.2s ease-in-out infinite}
.start-sub{position:relative;font:13px var(--pixel);text-shadow:2px 2px 0 #000}
.start:hover .start-btn{background:#fff}
@keyframes pulse{50%{transform:scale(1.06)}}
.screen:fullscreen{width:100%;height:100%;aspect-ratio:auto}
.btn-big{display:inline-block;font:17px var(--pixel);color:#1a1300;background:var(--yellow);padding:12px 20px;text-decoration:none;border:3px solid;border-color:#fff3b0 #8a6a00 #8a6a00 #fff3b0}
.btn-big:hover{background:#fff;color:#1a1300}

/* 상세 글 */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.game-title{font:28px var(--pixel);color:var(--yellow);margin:0 0 8px;line-height:1.3}
.game-title small{font-size:14px;color:var(--muted);margin-left:6px}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0}
.tags li{font-size:12px;background:var(--bg-2);border:1px solid var(--hi);padding:1px 8px;border-radius:99px;color:var(--cyan)}
.lead{font-size:17px;margin:0 0 6px}
.article h2,.doc h2{font:18px var(--pixel);color:var(--cyan);margin:26px 0 8px;padding-bottom:4px;border-bottom:2px dotted var(--hi)}
.article p,.doc p,.doc li{color:#dcdcf5}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}
.kv dt{font-weight:700;color:var(--yellow)}
.kv dd{margin:0;color:#dcdcf5}
.kv.small{font-size:14px}
.tips{padding-left:20px;margin:0}
.tips li{margin-bottom:6px;color:#dcdcf5}
.tips li::marker{content:'★ ';color:var(--yellow)}

/* 정보 페이지 */
.doc{max-width:820px;margin:0 auto 18px;padding:20px 26px}
.doc h1{font:26px var(--pixel);color:var(--yellow);margin:0 0 14px}
.muted{color:var(--muted)!important;font-size:13px}
.contact-mail{font-size:20px}
.todo{color:var(--pink)}
.center{text-align:center}
.big404{font:56px var(--pixel);color:var(--pink);text-shadow:4px 4px 0 var(--lo);margin:10px 0}

/* 하단 */
.foot{background:var(--lo);border-top:3px solid var(--hi);padding:20px 16px;font-size:13px;color:var(--muted);text-align:center}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-bottom:8px}
.foot-nav a{color:var(--muted)}
.foot p{margin:4px 0}
.counter{font:11px var(--pixel);letter-spacing:1px;opacity:.6}

/* 좁은 화면 */
@media (max-width:1020px){
  .play-area .ad-side{display:none}
  .detail{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ad-h{max-width:320px}
  .ad-h.ad-dev{height:50px;font-size:11px}
  .ad-mobile{display:block;margin-top:24px}
  .home-top{grid-template-columns:minmax(0,1fr)}
  .series{grid-template-columns:minmax(0,1fr)}
  .top-in{flex-direction:column;align-items:flex-start;gap:10px;position:relative}
  .top-act{position:absolute;top:14px;right:16px}
  .marquee{width:100%}
  .logo-ko{font-size:26px}
  .wrap{padding:14px 12px 24px}
  .box{padding:12px}
  .box-title{margin:-12px -12px 12px}
  .doc{padding:16px}
  /* 모바일: PLAY 를 누르면 게임 주소로 바로 이동 (게임에서 "화면을 눌러 시작" 하면 전체화면) */
  .window .screen{height:auto;width:100%;max-width:none;aspect-ratio:16/10}
  .play-area .window{width:100%}
  .start-btn{font-size:22px;padding:10px 18px}
  .game-title{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .marquee span,.burst,.start-btn{animation:none}
  .marquee span{padding-left:0}
}