:root{
    --ink:#dfe8e3;
    --ink-2:#c9d4cf;
    --line:#dfe8e366;
    --bg:#0b1010;
    --glass:#0e1414cc;
    --accent:#72d0a5;
    --y:#ffd54a; /* Y */
    --x:#4aa0ff; /* X */
    --b:#ff5b3d; /* B */
    --a:#31d16f; /* A */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:radial-gradient(1200px 800px at 50% 0%,#13201d,#060909 70%);
    color:var(--ink);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.stage{min-height:100dvh;display:grid;place-items:center;padding:0}
.device{width:100vw;height:calc(var(--vh, 1vh) * 100);position:relative;border-radius:0;overflow:hidden;box-shadow:none}
.device__screen{position:absolute;inset:0;background:#0b0f10}

/* Background image (optional) */
.game__bg{position:absolute;inset:0;opacity:1;background:url('screen.webp') center/cover no-repeat;pointer-events:none}

/* Loading overlay */
.loading{position:absolute;inset:0;display:grid;place-items:center;gap:12px;background:linear-gradient(180deg,#0b1110ee,#080c0bee);backdrop-filter:blur(3px);z-index:3}
.loading__spinner{width:56px;height:56px;border-radius:50%;border:2px solid #1f2a27;border-top-color:var(--ink-2);animation:spin 1s linear infinite}
.loading__text{font-weight:600;color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Canvas fills */
#playfield{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Controls layer */
.controls{position:absolute;inset:auto 0 18px 0;display:grid;grid-template-columns:1fr 1fr;align-items:end;padding:0 24px;gap:12px;pointer-events:none;z-index:2}
.controls__left,.controls__right{display:flex;justify-content:space-between;align-items:end}
.controls__right{justify-content:flex-end;gap:18px}

/* D-pad (outlined like screenshot) */
.dpad{position:relative;width:180px;height:180px;pointer-events:auto;touch-action:none}
.dpad__btn{position:absolute;background:transparent;border:2px solid var(--line);border-radius:12px;box-shadow:0 0 0 2px #0006 inset}
.dpad__up{left:62px;right:62px;top:0;height:70px}
.dpad__down{left:62px;right:62px;bottom:0;height:70px}
.dpad__left{top:55px;bottom:55px;left:0;width:70px}
.dpad__right{top:55px;bottom:55px;right:0;width:70px}
.dpad__btn:active,.dpad__btn.is-pressed{border-color:#ffffff;box-shadow:0 0 18px #ffffff55,0 0 0 2px #0006 inset}

/* ABXY cluster */
.abxy{pointer-events:auto;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:rgba(15,20,20,.35);border:2px solid var(--line);color:#fff;font-weight:700;text-shadow:0 2px 10px #000;box-shadow:0 6px 20px #0009, inset 0 0 0 2px #0a0f0f;user-select:none}
.abxy--y{color:var(--y)}
.abxy--x{color:var(--x)}
.abxy--b{color:var(--b)}
.abxy--a{color:var(--a)}
.abxy:active,.abxy.is-pressed{transform:scale(.96);border-color:#fff;box-shadow:0 2px 10px #0009,inset 0 0 0 2px #0a0f0f,0 0 16px #ffffff44}

/* Position buttons like screenshot (diamond) */
.controls__right{position:relative;width:220px;height:220px}
#btn-y{position:absolute;top:0;left:50%;transform:translate(-50%,0)}
#btn-x{position:absolute;top:50%;left:0;transform:translate(0,-50%)}
#btn-b{position:absolute;top:50%;right:0;transform:translate(0,-50%)}
#btn-a{position:absolute;bottom:0;left:50%;transform:translate(-50%,0)}

@media (max-width: 740px){
    .dpad{width:150px;height:150px}
    .dpad__up,.dpad__down{height:60px}
    .dpad__left,.dpad__right{top:48px;bottom:48px;width:60px}
    .abxy{width:60px;height:60px}
    .controls__right{width:200px;height:200px}
}

/* Start overlay */
.start{position:absolute;inset:0;display:grid;place-items:center;gap:10px;background:linear-gradient(180deg,#0b1110ee,#080c0bee);z-index:4}
.start button{appearance:none;border:1px solid #2a3532;background:#121817;color:#e8efe9;padding:12px 18px;border-radius:12px;font-weight:600;box-shadow:0 8px 22px #0009}
.start__hint{opacity:.75;font-size:12px}

/* iOS portrait auto-rotate to landscape */
body.ios-portrait .device{position:absolute;left:50%;top:50%;transform:rotate(90deg) translate(0,0);transform-origin:center;width:100vh;height:100vw}
body.ios-portrait .device{translate:-50% -50%}