/* Ali Ali Group Games: two looks. "tea" (warm, light) is the basic look, "night" (neon, dark) is the premium look. */
:root,[data-theme="tea"]{
  --bg:#fff6ea;--bg2:#fff;--ink:#3b2418;--muted:#7a5a48;--line:#efdcc4;--accent:#d8432f;--accent-ink:#fff;--accent-shadow:#a52f20;
  --jade:#2f7a5b;--gold:#e9b44c;--card-shadow:0 8px 0 #eedcc3;--hero-glow:none;--display:"Fraunces",Georgia,serif;--zh:"Noto Serif TC",serif;
  --chip:#fde3d8;--chip2:#e1efe7;--chip3:#fdf0cf;color-scheme:light}
[data-theme="night"]{
  --bg:#0d0b1a;--bg2:rgba(255,255,255,.05);--ink:#f4eefc;--muted:#cfc7e6;--line:rgba(255,255,255,.12);--accent:#ff4f8b;--accent-ink:#fff;--accent-shadow:#b02a5c;
  --jade:#5ee7ff;--gold:#ffb86b;--card-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 30px rgba(255,79,139,.10);
  --hero-glow:radial-gradient(600px 320px at 85% 0%,rgba(255,79,139,.32),transparent),radial-gradient(520px 320px at 5% 25%,rgba(94,231,255,.22),transparent);
  --display:"Space Grotesk",system-ui,sans-serif;--zh:"Noto Sans TC",sans-serif;--chip:rgba(255,79,139,.16);--chip2:rgba(94,231,255,.14);--chip3:rgba(255,184,107,.16);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 "Nunito",system-ui,sans-serif;background-image:var(--hero-glow);background-repeat:no-repeat;transition:background-color .3s,color .3s}
[data-theme="night"] body{font-family:"Space Grotesk",system-ui,sans-serif}
a{color:inherit}
.wrap{max-width:1120px;margin:auto;padding:0 22px}
/* nav */
nav.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;max-width:1120px;margin:auto}
.logo{display:flex;gap:9px;align-items:center;font:800 21px var(--display);text-decoration:none}
.logo i{font-style:normal;background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:2px 8px;font:700 16px var(--zh)}
nav.top .links{display:flex;align-items:center;gap:6px}
nav.top .links a{text-decoration:none;font-weight:700;font-size:15px;padding:8px 10px;border-radius:10px;color:var(--muted)}
nav.top .links a:hover,nav.top .links a[aria-current]{color:var(--ink)}
.themebtn{border:1.5px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:999px;padding:7px 12px;font:700 14px inherit;cursor:pointer;white-space:nowrap}
.menubtn{display:none;border:0;background:none;color:var(--ink);font-size:26px;cursor:pointer;padding:4px 8px}
/* buttons */
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);padding:14px 22px;border-radius:999px;font-weight:800;text-decoration:none;box-shadow:0 6px 0 var(--accent-shadow);border:0;cursor:pointer;font-size:17px}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 var(--accent-shadow)}
[data-theme="night"] .btn{border-radius:14px;box-shadow:0 0 28px rgba(255,79,139,.5);background:linear-gradient(90deg,#ff4f8b,#ff8a5b)}
.btn.ghost{background:none;color:var(--ink);box-shadow:none;border:2px solid var(--ink)}
[data-theme="night"] .btn.ghost{border-color:rgba(255,255,255,.4)}
/* hero */
.hero{display:grid;gap:26px;grid-template-columns:1.1fr .9fr;align-items:center;padding:28px 0 8px}
h1{font:800 clamp(38px,6vw,66px)/1.03 var(--display);margin:0 0 14px;letter-spacing:-.01em}
h1 em{color:var(--accent);font-style:normal}
h2{font:800 clamp(28px,4vw,40px)/1.1 var(--display);margin:0 0 10px}
h3{font:800 21px/1.2 var(--display);margin:0 0 6px}
.lead{font-size:19px;max-width:540px;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.zhbig{display:none}
[data-theme="night"] .zhbig{display:block;font:900 clamp(64px,11vw,140px)/1 var(--zh);background:linear-gradient(90deg,#ff4f8b,#ffb86b,#5ee7ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(255,79,139,.4));margin-bottom:6px}
/* tiles art */
.tiles{position:relative;height:320px}
.t{position:absolute;width:108px;height:144px;background:#fffdf8;border-radius:16px;box-shadow:0 10px 0 #e7d6bf,0 18px 30px rgba(80,40,10,.16);display:grid;place-items:center;font:700 62px var(--zh);animation:bob 5s ease-in-out infinite}
.t:nth-child(2){animation-delay:-1.2s}.t:nth-child(3){animation-delay:-2.4s}.t:nth-child(4){animation-delay:-3.6s}
[data-theme="night"] .t{background:#191530;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 28px rgba(94,231,255,.25);color:#fff!important;text-shadow:0 0 14px rgba(255,79,139,.8)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (prefers-reduced-motion:reduce){.t{animation:none}}
/* cards */
section{padding:34px 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--bg2);border-radius:24px;padding:22px;box-shadow:var(--card-shadow);text-decoration:none;display:block}
[data-theme="night"] .card{backdrop-filter:blur(6px)}
.card .art{height:120px;border-radius:16px;margin-bottom:14px;display:grid;place-items:center;font-size:56px}
.tag{display:inline-block;font:800 11.5px/1 inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--jade);margin:2px 0 8px}
.card p{margin:0;color:var(--muted)}
a.card:hover{transform:translateY(-2px)}
/* plus band */
.band{background:var(--jade);color:#fff;border-radius:28px;padding:28px;display:flex;justify-content:space-between;align-items:center;gap:18px}
[data-theme="night"] .band{background:linear-gradient(120deg,rgba(255,79,139,.28),rgba(94,231,255,.2));border:1px solid rgba(255,255,255,.18);color:var(--ink)}
.band .btn{background:#fff;color:#2f7a5b;box-shadow:0 6px 0 #1d5440}
[data-theme="night"] .band .btn{background:linear-gradient(90deg,#ff4f8b,#ff8a5b);color:#fff}
/* phones */
.phones{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 18px}
.phone{flex:0 0 220px;scroll-snap-align:start;text-align:center;font-weight:700;color:var(--muted);font-size:15px}
.phone img{width:100%;border-radius:28px;border:6px solid #1c1c1e;box-shadow:0 14px 30px rgba(0,0,0,.18);display:block;margin-bottom:10px;background:#000}
/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.plan{background:var(--bg2);border-radius:24px;padding:24px;box-shadow:var(--card-shadow)}
.plan.hot{outline:3px solid var(--accent)}
.price{font:800 38px var(--display)}.price small{font-size:16px;color:var(--muted)}
.plan ul{padding-left:20px;margin:12px 0 0}.plan li{margin:6px 0}
.soon{opacity:.75}
.pill{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;font:800 12px inherit;padding:3px 10px;vertical-align:middle}
/* faq */
details{background:var(--bg2);border-radius:18px;padding:16px 20px;box-shadow:var(--card-shadow);margin:12px 0}
summary{font-weight:800;cursor:pointer;font-size:18px;list-style:none}summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--accent);font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p,details ol,details ul{color:var(--muted);margin:10px 0 0}
.mail{font:800 clamp(20px,3vw,28px) var(--display);color:var(--accent);word-break:break-all}
/* legal */
.legal{max-width:760px}.legal h2{font-size:24px;margin-top:28px}.legal p,.legal li{color:var(--muted)}
/* footer */
footer{border-top:1px solid var(--line);margin-top:30px;padding:28px 0 40px;color:var(--muted);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}
footer a{text-decoration:none;margin-right:16px}
@media (max-width:820px){
  .hero{grid-template-columns:1fr}.tiles{height:190px}.t{width:76px;height:102px;font-size:42px}
  .grid3,.plans{grid-template-columns:1fr}.band{flex-direction:column;align-items:flex-start}
  .menubtn{display:block}nav.top{position:relative;flex-wrap:wrap}
  nav.top .links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:2px;padding-top:8px}
  nav.top.open .links{display:flex}nav.top .links a{padding:12px 6px;font-size:17px;border-top:1px solid var(--line)}
  .themebtn{align-self:flex-start;margin-top:8px}
}