:root{font-family:system-ui,-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;color:#244a65;font-synthesis:none}
*{box-sizing:border-box}
html{min-height:100%;background:#92cef6}
body{margin:0;min-height:100dvh;background:#b9debd;-webkit-tap-highlight-color:transparent}
.page{
  --scene-width:min(100vw,520px);
  --scene-height:calc(var(--scene-width)*1.77683);
  position:relative;isolation:isolate;
  width:min(100%,520px);min-height:100dvh;margin:0 auto;
  padding:calc(58px + env(safe-area-inset-top)) 15px calc(23px + env(safe-area-inset-bottom));
  background-color:#97bb89;
  /* Preserve the original image ratio: only the path beneath the gate repeats. */
  background-image:url('./assets/wonderhome-gate-v2.webp'),url('./assets/path-continuation-v2.webp');
  background-size:100% auto,100% auto;
  background-position:center top,center var(--scene-height);
  background-repeat:no-repeat,repeat-y;
  box-shadow:0 0 25px #1a547026;
}
.brand{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.tagline{font-size:clamp(9px,2.4vw,12px);letter-spacing:.14em;color:#fafdff;
 font-weight:850;white-space:nowrap;line-height:1.4;margin:0 0 12px;text-shadow:0 2px 7px #165a92ad}
.wordmark{display:block;width:100%;max-width:485px;height:auto;aspect-ratio:4.75/1;object-fit:contain;filter:drop-shadow(0 3px 4px #356d9a5b)}
/* Reserve vertical room for the entire closed gate; never lay cards over the gate. */
.gate-clearance{height:clamp(222px,60vw,318px);pointer-events:none}
.games{position:relative;z-index:1;display:flex;flex-direction:column;gap:15px;padding:0 2px}
.game-card{display:flex;align-items:center;gap:12px;min-height:114px;padding:12px;
 text-decoration:none;color:inherit;background:linear-gradient(145deg,#fffefaF5,#fffaf1EE);
 border:2px solid #fffdf8;border-radius:20px;
 box-shadow:0 4px 0 #8b9b866b,0 8px 19px #2f594742,inset 0 1px 4px #fff;
 transition:transform .16s ease,box-shadow .16s ease}
.game-card:active{transform:translateY(3px);box-shadow:0 1px 0 #8b9b866b,0 4px 8px #2f594742}
.game-card:focus-visible{outline:3px solid #1876a6;outline-offset:4px}
.thumbnail{display:block;width:84px;height:84px;flex:0 0 84px;object-fit:cover;border-radius:13px;border:2px solid #fdfcf8;background:#96d1eb;box-shadow:0 2px 7px #4d7d8b57}
.game-content{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.game-label{display:block;color:#6c8391;letter-spacing:.075em;font-size:clamp(9px,2.3vw,10.7px);font-weight:850;white-space:nowrap}
.game-title{margin:0;font-size:clamp(14.8px,3.9vw,19px);font-weight:900;color:#174e77;letter-spacing:-.055em;line-height:1.26;word-break:keep-all}
.game-description{margin:0;font-size:clamp(10.8px,2.8vw,12.4px);color:#536f7b;line-height:1.5;word-break:keep-all;letter-spacing:-.04em}
.card-arrow{width:15px;height:20px;flex:0 0 15px;margin-right:1px;opacity:.86}
.footer{position:relative;z-index:1;margin:66px -5px 0;padding-bottom:2px;text-align:center;font-size:9px;letter-spacing:.05em;
 font-weight:800;color:white;text-shadow:0 1px 3px #244b5f,0 3px 11px #173f36;white-space:nowrap}
@media(min-width:521px){.page{padding-left:28px;padding-right:28px}.gate-clearance{height:314px}}
@media(max-width:375px){.page{padding-left:12px;padding-right:12px;padding-top:calc(48px + env(safe-area-inset-top))}
 .gate-clearance{height:clamp(206px,59vw,222px)}.thumbnail{width:70px;height:75px;flex-basis:70px}
 .game-card{min-height:104px;gap:8px;padding:10px;border-radius:17px}
 .card-arrow{width:13px;flex-basis:13px}.game-title{font-size:14px}.game-description{font-size:10.5px}
 .game-label{font-size:8.4px}.tagline{font-size:9px}.footer{font-size:8px;margin-top:45px}}
@media(prefers-reduced-motion:reduce){.game-card{transition:none}}