:root {
  --ink: #29232a;
  --muted: #6c646a;
  --paper: #fbf7f1;
  --lavender: #eee9ff;
  --peach: #ffe7d8;
  --mint: #e5f1e9;
  --accent: #8065ed;
  --line: rgba(43, 35, 43, 0.11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Aptos", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
button, a { font: inherit; }
button { color: inherit; }

.skip-link { position: absolute; z-index: 10; left: -9999px; top: 1rem; padding: .75rem 1rem; color: #fff; background: var(--ink); }
.skip-link:focus { left: 1rem; }

.site-header { display: flex; align-items: center; gap: 1.5rem; max-width: 1160px; margin: auto; padding: 1.45rem 2rem; }
.brand { color: var(--ink); font-size: 1.55rem; font-weight: 850; letter-spacing: -.07em; line-height: 1; text-decoration: none; }
.brand span { color: #df865d; }
.site-nav { display: flex; gap: 1.85rem; margin: 0 auto; }
.site-nav a { position: relative; color: var(--ink); font-size: .93rem; font-weight: 600; line-height: 1; text-decoration: none; }
.site-nav a::after { position: absolute; right: 0; bottom: -.45rem; left: 0; height: 2px; background: #df865d; content: ""; transform: scaleX(0); transition: transform .2s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
.language-toggle, .footer-language { border: 1px solid var(--line); border-radius: 999px; padding: .48rem .75rem; background: rgba(255,255,255,.48); cursor: pointer; }
.menu-button { display: none; border: 0; padding: .5rem .7rem; background: transparent; cursor: pointer; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .95fr); align-items: center; min-height: 540px; max-width: 1160px; margin: 0 auto; overflow: hidden; border-radius: 32px; padding: 4.5rem 4rem; background: radial-gradient(circle at 84% 33%, rgba(255,255,255,.96) 0 4%, transparent 4.5%), radial-gradient(circle at 75% 37%, #c9bbff 0 20%, transparent 20.5%), linear-gradient(138deg, #fffdfa, #ebe7ff 65%, #ddd3ff); }
.eyebrow { margin: 0 0 .8rem; color: #c96c43; font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.hero h1 { max-width: 630px; margin: 0; font-family: "Noto Serif TC", "PMingLiU", Georgia, serif; font-size: 70px; font-weight: 700; line-height: 1.12; letter-spacing: -.075em; text-wrap: balance; }
.hero-copy { max-width: 470px; margin: 1.45rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.primary-button { display: inline-block; margin-top: 1.7rem; border-radius: 999px; padding: .85rem 1.1rem; color: #fff; background: var(--ink); box-shadow: 0 12px 24px rgba(37,29,36,.16); text-decoration: none; transition: transform .2s ease; }
.primary-button:hover { transform: translateY(-2px); }
.hero-orbit { position: relative; min-height: 350px; }
.orbit-card { position: absolute; top: 25%; right: 11%; z-index: 2; display: grid; width: 210px; height: 210px; place-content: center; border: 1px solid rgba(255,255,255,.75); border-radius: 58px; color: #373042; background: rgba(255,255,255,.25); box-shadow: inset 0 0 34px rgba(255,255,255,.55), 0 25px 40px rgba(86,70,141,.12); text-align: center; transform: rotate(-11deg); backdrop-filter: blur(12px); }
.orbit-card span { font-size: 2.2rem; font-weight: 800; letter-spacing: -.1em; }.orbit-card strong { color: var(--accent); font-size: 4.25rem; letter-spacing: -.13em; line-height: .8; }
.orbit-label { position: absolute; right: 3%; bottom: 9%; color: #7156d9; font-size: .64rem; font-weight: 800; letter-spacing: .18em; transform: rotate(-5deg); }.orbit-mark { position: absolute; color: #8a70ef; }.orbit-mark-one { top: 4%; right: 18%; font-size: 3.5rem; }.orbit-mark-two { bottom: 18%; left: 15%; font-size: 1.1rem; }

.explore-section, .featured-section, .about-section { max-width: 1160px; margin: auto; padding: 6.5rem 2rem 0; }
.explore-section { padding-top: 3.25rem; }
.featured-section h2, .about-section h2 { margin: 0; font-size: clamp(2rem, 3.2vw, 3.1rem); letter-spacing: -.065em; }
.entry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; text-align: left; }
.entry-card { position: relative; display: flex; min-height: 260px; flex-direction: column; overflow: hidden; border: 0; border-radius: 22px; padding: 1.5rem; color: var(--ink); box-shadow: 0 16px 29px rgba(89,60,42,.1); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.entry-card:hover, .entry-card:focus-visible { box-shadow: 0 22px 36px rgba(89,60,42,.16); transform: translateY(-5px); }
.entry-card h3 { position: relative; z-index: 2; max-width: 57%; margin: 1rem 0 .55rem; font-size: 1.18rem; letter-spacing: -.055em; }
.entry-card p { position: relative; z-index: 2; max-width: 55%; margin: 0; font-size: .78rem; line-height: 1.65; }
.entry-card strong { position: relative; z-index: 2; margin-top: auto; font-size: .8rem; }
.card-icon { position: relative; z-index: 2; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.84); box-shadow: 0 4px 13px rgba(57,42,54,.13); font-size: 1.3rem; }
.games-card { background: var(--lavender); }.yummie-card { background: var(--peach); }.coming-card { background: var(--mint); cursor: pointer; }
.games-card strong { color: #5f4fc4; }.yummie-card strong { color: #ca5932; }.coming-card strong { color: #23735c; }
.entry-art { position: absolute; z-index: 1; right: -1rem; bottom: -1rem; display: block; width: 59%; height: 78%; pointer-events: none; }
.game-island { right: -2.1rem; bottom: -1.8rem; width: 62%; height: 82%; border-radius: 45% 44% 48% 40%; background: radial-gradient(circle at 50% 26%, #d4f0ac 0 13%, transparent 14%), radial-gradient(ellipse at 48% 46%, #8dba74 0 33%, #4e805c 34% 38%, transparent 39%), linear-gradient(145deg, transparent 43%, #8b5e49 44% 58%, transparent 59%); filter: drop-shadow(0 16px 12px rgba(86,81,154,.18)); transform: rotate(-8deg); }
.game-island::after { position: absolute; top: 44%; left: 27%; width: 28%; height: 11%; border-radius: 50%; background: #d8e8bc; content: ""; transform: rotate(-7deg); }
.island-cloud { position: absolute; border-radius: 50%; background: rgba(255,255,255,.7); }.cloud-one { top: 8%; left: 5%; width: 24px; height: 12px; }.cloud-two { top: 26%; right: 1%; width: 17px; height: 9px; }
.island-tree { position: absolute; z-index: 2; width: 24px; height: 38px; border-radius: 60% 60% 46% 46%; background: #6c9d5e; box-shadow: 10px 5px 0 -3px #8ebd74; }.tree-one { top: 23%; left: 37%; }.tree-two { top: 39%; right: 27%; transform: scale(.78); }
.island-player { position: absolute; z-index: 3; right: 37%; bottom: 31%; color: #f5b070; font-size: 1.85rem; text-shadow: 0 10px 0 #5f4a72; }
.cake-photo { right: -1.15rem; bottom: -1.3rem; width: 61%; height: 81%; border-radius: 58% 0 0 0; background: linear-gradient(90deg, rgba(255,231,216,.8), transparent 34%), url("yummie/assets/images/safari-cake-front.jpg") center / cover; box-shadow: -10px 14px 22px rgba(169,89,49,.12); transform: rotate(3deg); }
.tool-panel { right: -1.4rem; bottom: -1rem; width: 57%; height: 74%; border: 1px solid rgba(78,133,111,.09); border-radius: 22px 0 0 22px; background: rgba(255,255,255,.78); box-shadow: -8px 15px 24px rgba(61,118,91,.12); }
.tool-dots { position: absolute; top: 14px; left: 15px; width: 22px; height: 5px; border-radius: 9px; background: #ff8a70; box-shadow: 8px 0 #ffd671, 16px 0 #71c7ae; }.tool-sidebar { position: absolute; top: 31px; bottom: 13px; left: 12px; width: 20%; border-radius: 8px; background: #edf5f0; }.tool-chart { position: absolute; right: 15px; bottom: 25px; left: 37%; height: 48%; border-radius: 9px; background: linear-gradient(135deg, transparent 0 31%, #a3c3ff 32% 34%, transparent 35% 50%, #a3c3ff 51% 54%, transparent 55%), #f2f6ff; }.tool-chip { position: absolute; width: 22px; height: 16px; border-radius: 6px; }.chip-one { right: 23px; top: 42%; background: #8cc9ba; }.chip-two { right: 52px; top: 42%; background: #ffbd7c; }

.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }.section-note { max-width: 320px; margin: 0; color: var(--muted); line-height: 1.65; }.featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }.featured-card { display: flex; min-height: 230px; flex-direction: column; justify-content: end; overflow: hidden; border-radius: 20px; padding: 1.6rem; color: #fff; text-decoration: none; transition: transform .2s ease; }.featured-card:hover { transform: translateY(-4px); }.featured-game { background: radial-gradient(circle at 76% 23%, #bc91ff 0 4%, transparent 4.5%), radial-gradient(circle at 71% 22%, #5342ac 0 17%, transparent 17.5%), linear-gradient(135deg, #15122c, #352178); }.featured-yummie { background: radial-gradient(circle at 76% 22%, #fff6e3 0 13%, transparent 13.5%), linear-gradient(135deg, #69422d, #c1784c 65%, #ffe3b3); }.featured-tag { margin-bottom: auto; font-size: .68rem; font-weight: 800; letter-spacing: .12em; }.featured-card strong { max-width: 260px; font-size: 1.75rem; line-height: 1.05; letter-spacing: -.055em; }.featured-card > span:last-child { align-self: end; font-size: 1.3rem; }

.about-section { max-width: 800px; padding-bottom: 6.5rem; text-align: center; }.about-section > p:last-child { max-width: 560px; margin: 1.4rem auto 0; color: var(--muted); line-height: 1.75; }.site-footer { display: flex; justify-content: space-between; max-width: 1160px; margin: auto; border-top: 1px solid var(--line); padding: 1.5rem 2rem; color: var(--muted); font-size: .82rem; }

dialog { max-width: 28rem; border: 0; border-radius: 20px; padding: 2rem; color: var(--ink); box-shadow: 0 24px 60px rgba(31,22,29,.3); }.dialog-close { float: right; border: 0; background: transparent; cursor: pointer; font-size: 1.5rem; } dialog::backdrop { background: rgba(32,25,33,.35); }

@media (max-width: 1020px) { .hero { padding: 3.75rem 3rem; }.hero h1 { font-size: 58px; } .entry-card h3, .entry-card p { max-width: 61%; } }
@media (max-width: 760px) { .site-header { flex-wrap: wrap; padding: 1rem 1.25rem; }.menu-button { display: block; margin-left: auto; }.site-nav { display: none; order: 4; width: 100%; flex-direction: column; gap: 1rem; padding-top: 1rem; }.site-nav.is-open { display: flex; }.hero { grid-template-columns: 1fr; min-height: 0; border-radius: 0; padding: 3.5rem 1.4rem 2.5rem; }.hero h1 { font-size: clamp(2.55rem, 12vw, 3.4rem); line-height: 1.15; letter-spacing: -.06em; }.hero-orbit { min-height: 230px; margin-top: 1rem; }.orbit-card { top: 7%; right: 16%; width: 160px; height: 160px; }.orbit-card strong { font-size: 3.2rem; }.explore-section, .featured-section, .about-section { padding: 3rem 1.25rem 0; }.entry-grid, .featured-grid { grid-template-columns: 1fr; }.entry-card { min-height: 220px; }.entry-card h3, .entry-card p { max-width: 54%; }.entry-art { width: 55%; height: 83%; }.game-island { right: -2rem; }.cake-photo { right: -1rem; }.section-heading-row { display: block; }.section-note { margin-top: 1rem; }.about-section { padding-bottom: 4.5rem; }.site-footer { padding: 1.25rem; }.language-toggle { order: 3; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }