/* index.html: start page chooser. Uses tokens.css only (no base.css nav). */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;background:radial-gradient(ellipse at top,#3a0073 0%,#28004E 35%,var(--bg) 75%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:15px;line-height:1.55}
a{color:var(--accent)}

.start-lang{position:absolute;top:14px;right:16px;z-index:5}
.start{max-width:1080px;margin:0 auto;padding:56px 20px 40px;display:flex;flex-direction:column;align-items:center;gap:34px}
.start-head{text-align:center}
.start-mark{width:64px;height:64px;margin:0 auto 14px;border-radius:14px;background:rgba(255,223,86,.12) url(../iconer/HAKOO.png) center/cover no-repeat;border:2px solid #FFDF56;display:flex;align-items:center;justify-content:center;font-size:0}
.start-head h1{font-size:40px;font-weight:900;letter-spacing:2px;color:#FFDF56}
.start-head p{color:#e9dcff;font-size:17px;margin-top:4px}

.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:100%}
/* The choices are always dark (they sit on the purple glow), whatever appearance the visitor picked */
.choice{--text:#e6edf3;--muted:#8b949e;--border:#30363d;--green:#3fb950;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:250px;padding:26px 24px;border-radius:18px;border:2px solid var(--border);background:rgba(22,27,34,.88);color:var(--text);text-decoration:none;text-align:left;font:inherit;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.choice:hover{transform:translateY(-3px);border-color:#FFDF56;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.choice:focus-visible{outline:3px solid #FFDF56;outline-offset:3px}
.choice-ic{font-size:40px;line-height:1}
.choice-title{font-size:22px;font-weight:900}
.choice-text{color:var(--muted);font-size:14px;flex:1}
.choice-tag{font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px;border:1px solid var(--border);color:var(--muted)}

.choice-community{background:linear-gradient(160deg,rgba(89,0,176,.55),rgba(22,27,34,.92) 70%)}
.choice-community .choice-title{color:#FFDF56}
.choice-games{background:linear-gradient(160deg,rgba(63,185,80,.30),rgba(22,27,34,.92) 70%)}
.choice-games .choice-title{color:var(--green)}
.tag-anon{color:var(--green);border-color:var(--green)}

.choice-remember{border-style:dashed}
.choice-remember .choice-title{color:var(--text)}
.choice-remember.on{border-style:solid;border-color:var(--green);background:linear-gradient(160deg,rgba(63,185,80,.18),rgba(22,27,34,.92) 70%)}
.choice-remember.on .choice-tag{color:var(--green);border-color:var(--green)}

.start-note{color:var(--text);font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.start-note[hidden]{display:none}
.link-btn{background:none;border:none;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}
.start-foot{color:var(--muted);font-size:12px;text-align:center;max-width:620px}
.start-foot a{margin-left:6px}

@media (max-width:820px){
  .start{padding-top:34px;gap:24px}
  .choices{grid-template-columns:1fr}
  .choice{min-height:0}
}
@media (prefers-reduced-motion:reduce){.choice{transition:none}.choice:hover{transform:none}}