*{box-sizing:border-box}body{margin:0;background:#f2f3f1;color:#39454d;font:13px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:max(12px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))}main{width:min(100%,410px);margin:auto;position:relative}button,a,label{-webkit-tap-highlight-color:transparent}button{color:inherit;font:inherit;cursor:pointer}button:disabled{opacity:.45}button:focus-visible,a:focus-visible{outline:3px solid #6d93a6;outline-offset:3px}[hidden]{display:none!important}header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 7px 15px}header>a{font-weight:800;font-size:11px;color:#44535a;text-decoration:none;letter-spacing:1.5px}header>span{font-size:8px;letter-spacing:1px;color:#939ca1}header>button{border:0;background:none;letter-spacing:2px;min-width:35px;min-height:35px}.console{filter:drop-shadow(0 16px 18px #3a46501c)}.lid,.base{border:1px solid #bec7ca;background:linear-gradient(120deg,#f4f6f5,#dce2e4);box-shadow:inset 1px 1px #fff,inset -2px -2px 2px #c5ced1}.lid{border-radius:22px 22px 12px 12px;padding:18px 26px 12px;position:relative}.camera{position:absolute;top:7px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:#63727a;box-shadow:0 0 0 2px #d2dadc}.screen{background:#171e23;box-shadow:0 0 0 1px #313b42,inset 0 0 5px #000;border-radius:3px;overflow:hidden}.top{aspect-ratio:5/3;max-height:24svh;margin:auto}.screen canvas{display:block;width:100%;height:100%;object-fit:contain}.brand{font-size:9px;font-weight:750;letter-spacing:1px;margin:11px 1px 0;color:#75848a;display:flex;justify-content:space-between}.brand span{font-size:6px;letter-spacing:1.2px;font-weight:400}.hinge{height:15px;display:flex;background:linear-gradient(#dce1e3,#b5c0c4,#e9eded);border-radius:5px;gap:16px;padding:0 11px;box-shadow:0 2px 3px #9ba7af33}.hinge>i{width:20px;background:#c0cbd0;border-inline:1px solid #9fadb3}.hinge>span{flex:1}.base{border-radius:10px 10px 24px 24px;padding:17px 22px 12px;position:relative}.bottom{width:79%;aspect-ratio:4/3;max-height:24svh;margin:auto;touch-action:none}.shoulders{display:flex;justify-content:space-between;position:absolute;top:19px;left:5px;right:5px;pointer-events:none}.shoulders button{pointer-events:auto;background:#d2dadd;border:1px solid #a9b7bd;border-radius:6px;width:29px;height:40px;font-weight:700;font-size:11px;touch-action:none;user-select:none}.controls{display:flex;justify-content:space-between;align-items:center;margin:25px 0 5px;height:110px}.dpad{width:105px;height:105px;display:grid;grid-template:repeat(3,35px)/repeat(3,35px);filter:drop-shadow(1px 3px 1px #b1bdc4)}.dpad button,.dpad i{border:0;background:#6b7a84;color:#d0d9dd;touch-action:none;user-select:none}.dpad button{font-size:18px;box-shadow:inset 0 1px #8999a4}.up{grid-area:1/2;border-radius:4px 4px 0 0}.left{grid-area:2/1;border-radius:4px 0 0 4px}.dpad i{grid-area:2/2}.right{grid-area:2/3;border-radius:0 4px 4px 0}.down{grid-area:3/2;border-radius:0 0 4px 4px}.abxy{width:112px;height:112px;display:grid;grid-template:repeat(3,36px)/repeat(3,36px);gap:1px}.abxy button{border-radius:50%;border:1px solid #748691;background:linear-gradient(130deg,#9baeb9,#778c99);box-shadow:inset 1px 1px #c7d2d8,1px 2px 1px #b0bdc5;color:#fff;font-size:12px;font-weight:600;touch-action:none;user-select:none}.x{grid-area:1/2}.y{grid-area:2/1}.a{grid-area:2/3}.b{grid-area:3/2}.system{display:flex;flex-direction:column;gap:12px;align-self:flex-end;margin-bottom:10px}.system button{background:#e6ebed;border:1px solid #bbc8ce;border-radius:10px;padding:8px 5px;font-size:7px;letter-spacing:.6px;touch-action:none;user-select:none}.held{filter:brightness(.7);transform:translateY(1px)}.base-foot{display:flex;justify-content:space-between;margin-top:15px;font-size:5px;letter-spacing:1.4px;color:#85949c}.base-foot i{width:4px;height:4px;background:#679fc0;border-radius:50%;box-shadow:0 0 3px #5897bb}#welcome{padding:24px 8px 5px}.tag{font-size:9px;color:#89989e;letter-spacing:1.5px}h1{font-size:24px;letter-spacing:1px;font-weight:600;line-height:1.4;margin:8px 0}p{color:#839098;font-size:12px;line-height:1.9}.load-button{display:block;text-align:center;background:#506b7c;border:1px solid #425f71;box-shadow:0 3px 8px #40566622;border-radius:9px;color:#fff;padding:13px;margin-top:20px;cursor:pointer}.note{font-size:10px}.busy{opacity:.6;pointer-events:none}footer{display:flex;justify-content:space-between;align-items:center;padding:16px 7px 0;color:#8a969e;font-size:10px}footer button{border:1px solid #c6d0d5;border-radius:20px;background:#e5ebee;padding:7px 11px;font-size:10px}#settings{position:absolute;top:50px;left:0;right:0;background:#f4f7f7;border:1px solid #bac9d0;border-radius:15px;box-shadow:0 12px 60px #334b5c55;padding:22px;z-index:5}h2{font-size:18px;margin:0 0 25px}#close-settings{position:absolute;top:12px;right:15px;border:0;background:none;font-size:26px}#settings>button:not(#close-settings){display:block;width:100%;padding:12px;border:1px solid #bccad0;border-radius:7px;background:#e2eaee;margin-bottom:9px}#settings a{color:#506b7c}@media(max-height:700px){.top,.bottom{max-height:21svh}.lid{padding:16px 20px 9px}.base{padding-top:12px}.controls{margin-top:19px;height:97px}.dpad{width:90px;height:90px;grid-template:repeat(3,30px)/repeat(3,30px)}.abxy{width:97px;height:97px;grid-template:repeat(3,31px)/repeat(3,31px)}.base-foot{margin-top:10px}header{padding-bottom:6px}#welcome{padding-top:17px}}@media(min-width:800px){body{padding-top:30px}.top,.bottom{max-height:240px}}
/* Keep physical screen proportions even on a short phone viewport. */
.top{width:min(100%,40svh);height:auto}.bottom{width:min(79%,32svh);height:auto}
@media(max-height:700px){.top{width:min(100%,35svh)}.bottom{width:min(79%,28svh)}}

.load-button.secondary{background:#dce4e8;color:#25333c}.library{margin-top:22px;text-align:left}.library-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.library-head h2{font-size:16px;margin:0}.library button{padding:8px 12px;border-radius:8px;border:1px solid #c5ced3;background:#fff;color:#25333c;cursor:pointer}.title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #ccd5db}.title-row span{min-width:0;overflow-wrap:anywhere}.title-row small{display:block;font-size:10px;color:#657782;margin-top:3px}.title-row button{flex-shrink:0}.library button:disabled{opacity:.5;cursor:default}#library-empty{font-size:12px}.busy .library{pointer-events:none;opacity:.5}

#cloud-library{border-top:1px solid #cbd3d7;padding-top:14px}#cloud-library summary{font-weight:650;cursor:pointer}#cloud-auth{margin:12px 0}#cloud-auth label{font-size:11px;color:#657782}.cloud-auth-row{display:flex;gap:7px;margin-top:4px}.cloud-auth-row input{min-width:0;flex:1;border:1px solid #c5ced3;border-radius:8px;padding:9px;background:#fff;color:#25333c;font:inherit}#cloud-progress{width:100%;margin-top:12px;accent-color:#4d788e}#welcome .cloud-note{font-size:11px;margin:10px 0;color:#657782}

/* Game management lives in the overflow menu, including during gameplay. */
#settings{position:fixed;top:max(62px,calc(env(safe-area-inset-top) + 48px));left:50%;right:auto;transform:translateX(-50%);width:min(410px,calc(100% - 28px));max-height:calc(100dvh - max(62px,calc(env(safe-area-inset-top) + 48px)) - 18px);overflow-y:auto;overscroll-behavior:contain;padding:0 20px 20px}.settings-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;background:#f4f7f7;padding:14px 0 10px}.settings-head h2{font-size:17px;margin:0}#close-settings{position:static;min-width:34px;min-height:34px;padding:0;line-height:1}#welcome{padding:0 0 5px}#welcome .load-button{margin-top:12px}.settings-divider{border-top:1px solid #cbd3d7;margin:16px 0}#settings .cloud-note{font-size:11px}#settings .note{margin-bottom:0}