:root{font:16px system-ui;color-scheme:dark;color:#eff7fd;background:#102338}*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at top left,#225556,transparent 65%)}
main{width:min(100%,540px);margin:auto;padding:clamp(16px,4vw,36px)}header{display:flex;align-items:center;gap:12px;margin-bottom:22px}
header strong{font-size:1.55rem}header img{object-fit:contain}
.downloadHero{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid #365063}
.downloadEyebrow{font-size:.65rem;letter-spacing:.14em;color:#8de4cc;font-weight:700}
.downloadHero h1{font-size:clamp(1.7rem,6vw,2.2rem);line-height:1.15;letter-spacing:-.04em;margin:14px 0 22px}
.download{display:flex;align-items:center;justify-content:center;gap:16px;min-height:92px;padding:18px 16px;border-radius:14px;background:linear-gradient(120deg,#dc3f56,#ad203d);color:#fff;text-align:left;text-decoration:none;box-shadow:0 8px 24px #080d1840;border:1px solid #f77b8f;font-size:clamp(1.6rem,6vw,2rem);font-weight:800}
.download>span:first-child{font-size:2.5rem;line-height:1}.download small{display:block;color:#ffe6ec;font-size:.8rem;font-weight:400;margin-top:3px}
.download:hover{background:#d72e4a}.download:focus-visible{outline:3px solid #ffdf86;outline-offset:4px}
.downloadHero p{font-size:.75rem;color:#bad4df;line-height:1.5;margin:14px 0 0}
small,label{color:#bad4df}section{padding:22px;background:#13283a;border:1px solid #365063;border-radius:16px}
h1{font-size:1.5rem;margin:0 0 16px}h2{font-size:1rem}label{display:grid;gap:5px;margin:10px 0}input,select,button{font:inherit;padding:10px;border-radius:8px}
input,select{width:100%;background:#0c1b2a;color:white;border:1px solid #507087}
button{margin:5px 0;background:#b82d49;color:white;border:0;cursor:pointer;min-height:44px}
form>button,#list>button,.secondary{width:100%}.secondary,nav button{background:#2b475a}summary{cursor:pointer;padding:12px 0}canvas{width:100%;background:#07111b;image-rendering:pixelated}nav{display:flex;gap:6px}nav button{flex:1}
#messages{max-height:9rem;overflow:auto;overflow-wrap:anywhere}#status{color:#ffdc92;min-height:1.4em}[hidden]{display:none!important}
#list{display:flex;gap:10px;overflow-x:auto}#list>button{min-width:150px;max-width:190px;background:#273f51;border:2px solid #415668}#list>button[aria-pressed=true]{border-color:#63aaff;background:#1c456d}#play{width:100%;background:#225aa3}#play:disabled{opacity:.45}
#list>button{display:grid;justify-items:center;gap:5px;background:linear-gradient(150deg,#263a4b,#162839)}#list img{object-fit:contain;image-rendering:pixelated}
#characters article{padding:.9rem 1rem;margin:.8rem 0;border:1px solid #365063;border-radius:10px;background:#162d40}#characters h2{font-size:1.1rem}#accountEmail{overflow-wrap:anywhere}
.accountMetrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr));gap:12px}.accountMetrics>div{display:grid;gap:5px;background:#102238;border-radius:9px;padding:12px}.accountMetrics strong{font-size:1.4rem}.accountMetrics button:disabled{background:#364657;color:#e3e7ed;cursor:default}#accountDevices{padding:0}#accountDevices li{display:flex;align-items:center;justify-content:space-between;gap:8px}#accountDevices button{width:auto}#list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr))}#list>button{max-width:none;min-width:0}#list>button:disabled{opacity:1;color:inherit}
