*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{color:#20232a;background:#f6f3ee;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.app-shell{grid-template-columns:248px minmax(0,1fr);min-height:100%;display:grid}.app-content{min-width:0;padding:40px}.catalog-view,.history-view,.setup-view,.play-view,.auth-view{max-width:1180px;margin:0 auto}.app-sidebar{background:#ebe7df;border-right:1px solid #d8d2c8;grid-template-rows:auto auto 1fr auto;align-content:start;min-height:100svh;padding:26px 18px;display:grid;position:sticky;top:0}.sidebar-brand{color:#20232a;margin-bottom:28px;font-size:1.05rem;font-weight:900;line-height:1.1;text-decoration:none}.sidebar-nav,.account-nav{gap:8px;display:grid}.sidebar-nav{align-self:start}.account-nav{border-top:1px solid #d8d2c8;align-self:end;padding-top:16px}.sidebar-link{color:#3b414d;border-radius:8px;align-items:center;min-height:42px;padding:0 12px;font-weight:800;text-decoration:none;transition:background .16s,color .16s;display:flex}.sidebar-link:hover,.sidebar-link.router-link-active{color:#20232a;background:#fff}.account-name,.account-link,.account-primary,.cloud-checking,.cloud-unavailable,.sync-indicator{border-radius:8px;justify-content:center;align-items:center;gap:7px;min-height:36px;padding:0 12px;font-size:.86rem;display:inline-flex}.account-name{color:#fff;background:#20232a;font-weight:800}.account-link,.account-primary{color:#3b414d;background:#fff;border:1px solid #d8dce3;width:100%;text-decoration:none}.account-primary{color:#fff;background:#20232a;border-color:#20232a}.sync-indicator{color:#5f6673;background:#fff;border:1px solid #d8dce3;font-weight:800}.cloud-checking,.cloud-unavailable{text-align:center;width:100%;margin:0;position:relative}.cloud-checking{color:#5f6673;background:#fff;border:1px solid #d8dce3;font-weight:800}.cloud-unavailable{color:#725a16;cursor:help;background:#fff7e6;border:1px solid #f0b429;font-weight:900}.cloud-unavailable:after{color:#fff;content:attr(title);opacity:0;pointer-events:none;text-align:left;z-index:30;background:#20232a;border-radius:8px;width:min(260px,78vw);padding:10px 12px;font-size:.78rem;font-weight:700;line-height:1.45;transition:opacity .16s,transform .16s;position:absolute;bottom:calc(100% + 10px);left:0;transform:translateY(4px)}.cloud-unavailable:hover:after,.cloud-unavailable:focus-visible:after{opacity:1;transform:translateY(0)}.cloud-checking .sync-dot{background:#2f7dff;animation:.9s ease-in-out infinite sync-pulse}.cloud-unavailable .sync-dot{background:#f0b429}.sync-dot{background:#8a93a3;border-radius:999px;width:9px;height:9px;display:inline-block}.sync-indicator.syncing .sync-dot{background:#2f7dff;animation:.9s ease-in-out infinite sync-pulse}.sync-indicator.synced .sync-dot{background:#287d3c}.sync-indicator.offline .sync-dot,.sync-indicator.error .sync-dot{background:#f0b429}@keyframes sync-pulse{0%,to{opacity:.35;transform:scale(.82)}50%{opacity:1;transform:scale(1.18)}}.play-view{grid-template-rows:auto minmax(0,1fr);width:100%;max-width:none;min-height:calc(100svh - 80px);display:grid}.catalog-header,.play-header{justify-content:space-between;align-items:end;gap:32px;margin-bottom:28px;display:flex}.catalog-header h1,.play-header h1{letter-spacing:0;max-width:760px;margin:0;font-size:clamp(2.25rem,6vw,5.8rem);line-height:.95}.play-header h1{font-size:clamp(2rem,4vw,4rem)}.catalog-header p:last-child{color:#5f6673;max-width:360px;margin:0 0 8px;line-height:1.6}.catalog-summary{place-items:flex-end end;gap:14px;display:grid}.catalog-summary p{color:#5f6673;max-width:360px;margin:0;line-height:1.6}.eyebrow{color:#5f6673;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;font-size:.78rem;font-weight:800}.toolbar{border-top:1px solid #d8d2c8;border-bottom:1px solid #d8d2c8;grid-template-columns:minmax(260px,420px) 1fr;align-items:end;gap:20px;margin-bottom:28px;padding:18px 0;display:grid}.auth-panel{background:#fff;border:1px solid #dfe3ea;border-radius:8px;gap:18px;max-width:520px;margin-left:auto;margin-right:auto;padding:28px;display:grid}.auth-panel label{gap:8px;display:grid}.auth-panel label span{color:#5f6673;text-transform:uppercase;font-size:.78rem;font-weight:800}.auth-panel input{color:#20232a;background:#fff;border:1px solid #d8dce3;border-radius:8px;outline:none;min-height:46px;padding:0 14px}.auth-note{color:#5f6673;margin:0;line-height:1.5}.auth-choice{border:1px solid #d8dce3;border-radius:8px;gap:12px;margin:0;padding:16px;display:grid}.auth-choice legend{color:#20232a;padding:0 6px;font-weight:900}.auth-choice p{color:#5f6673;margin:0;line-height:1.5}.auth-choice label{align-items:center;gap:10px;display:flex}.auth-choice input{width:auto;min-height:auto}.auth-choice label span{color:#20232a;text-transform:none;font-size:.95rem}.search-field{gap:8px;display:grid}.search-field span{color:#5f6673;text-transform:uppercase;font-size:.78rem;font-weight:800}.search-field input{color:#20232a;background:#fff;border:1px solid #d8dce3;border-radius:8px;outline:none;width:100%;min-height:46px;padding:0 14px;transition:border-color .16s,box-shadow .16s}select{appearance:none;color:#20232a;background:#fff;border:1px solid #d8dce3;border-radius:8px;outline:none;width:100%;min-height:46px;padding:0 40px 0 14px}.search-field input:focus{border-color:#2f7dff;box-shadow:0 0 0 4px #2f7dff1f}.skill-filter{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.skill-filter button,.back-button{color:#3b414d;background:#fff;border:1px solid #d8dce3;border-radius:999px;justify-content:center;align-items:center;min-height:42px;padding:0 16px;text-decoration:none;transition:background .16s,border-color .16s,color .16s,transform .16s;display:inline-flex}.skill-filter button:hover,.back-button:hover{transform:translateY(-1px)}.skill-filter button.active{color:#fff;background:#20232a;border-color:#20232a}.game-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;display:grid}.game-card{color:inherit;text-align:left;background:#fff;border:1px solid #dfe3ea;border-radius:8px;align-items:start;gap:12px;min-height:360px;padding:14px;transition:border-color .18s,box-shadow .18s,transform .18s;display:grid;overflow:hidden}.game-card:hover,.game-card:focus-visible{border-color:#aeb7c5;outline:none;transform:translateY(-4px);box-shadow:0 18px 42px #20232a1f}.game-card strong{font-size:1.35rem;line-height:1.1}.game-card span{color:#5f6673;line-height:1.5}.game-card small,.card-meta{color:#727986;letter-spacing:.08em;text-transform:uppercase;font-size:.76rem;font-weight:800}.game-card small{align-self:end}.game-card-footer{border-top:1px solid #dfe3ea;align-self:end;gap:6px;width:100%;padding-top:12px;display:grid}.game-card-footer small{align-self:auto}.preview{background:radial-gradient(circle at 30% 20%,#ffffffdb,#0000 34%),linear-gradient(135deg,#20232a14,#20232a05);border-radius:6px;place-content:center;width:100%;height:150px;display:grid;position:relative;overflow:hidden}.dot{background:#b6bfcb;border-radius:999px;width:13px;height:13px;margin:8px}.dot.odd{background:var(--accent);transform:scale(1.35)}.preview:has(.dot){grid-template-columns:repeat(4,30px)}.pulse,.orbit{border-radius:999px;display:block;position:absolute}.pulse.outer{border:2px solid #20232a24;width:112px;height:112px}.pulse.middle{background:color-mix(in srgb, var(--accent), transparent 75%);width:74px;height:74px}.pulse.core{background:var(--accent);width:34px;height:34px}.orbit.path{border:2px solid color-mix(in srgb, var(--accent), transparent 52%);width:106px;height:106px}.orbit.focus{background:#20232a;width:18px;height:18px}.orbit.satellite{background:var(--accent);width:22px;height:22px;transform:translate(48px,-28px)}.cell{background:#c9d0da;border-radius:5px;width:26px;height:26px;margin:4px}.cell.lit{background:var(--accent)}.preview:has(.cell){grid-template-columns:repeat(4,34px)}.road{background:#20232a;border-radius:4px;width:54px;height:120px;display:block;position:absolute;top:15px}.left-road{left:calc(50% - 66px)}.right-road{right:calc(50% - 66px)}.mini-car,.mini-obstacle{border-radius:5px;width:22px;display:block;position:absolute}.mini-car{background:var(--accent);height:34px;bottom:26px}.left-car{left:calc(50% - 52px)}.right-car{right:calc(50% - 32px)}.mini-obstacle{background:#fff;height:28px;top:33px}.left-obstacle{left:calc(50% - 31px)}.right-obstacle{right:calc(50% - 54px)}.rhythm-lane{background:#20232a;border-radius:4px;width:28px;height:126px;margin:0 3px;display:block;position:relative}.rhythm-note{background:var(--accent);color:#fff;border-radius:5px;justify-content:center;align-items:center;width:22px;height:22px;font-size:.72rem;font-weight:800;display:flex;position:absolute;top:18px;left:3px}.rhythm-lane:nth-child(2) .rhythm-note{top:48px}.rhythm-lane:nth-child(3) .rhythm-note{top:30px}.rhythm-lane:nth-child(4) .rhythm-note{top:68px}.instrument-line{background:#f6f3ee;width:136px;height:4px;display:block;position:absolute;bottom:28px;left:calc(50% - 68px)}.empty-state{color:#5f6673;grid-column:1/-1;padding:32px 0}.history-list{gap:14px;display:grid}.history-record{background:#fff;border:1px solid #dfe3ea;border-radius:8px;grid-template-columns:minmax(220px,.85fr) minmax(0,1.15fr);align-items:start;gap:22px;padding:18px;display:grid}.history-record h2{margin:8px 0;font-size:1.35rem;line-height:1.1}.history-record span,.history-empty-metadata{color:#5f6673}.history-metadata{grid-template-columns:minmax(120px,.8fr) minmax(120px,1fr);gap:10px 16px;margin:0;display:grid}.history-metadata dt{color:#5f6673;text-transform:uppercase;font-size:.78rem;font-weight:800}.history-metadata dd{color:#20232a;overflow-wrap:anywhere;min-width:0;margin:0;font-weight:800}.history-empty-metadata{margin:0}.play-header{align-items:center}.play-view .play-header{border-bottom:1px solid #d8d2c8;margin-bottom:16px;padding-bottom:14px}.play-view .play-header h1{font-size:clamp(1.7rem,3vw,3.2rem)}.play-view .eyebrow{margin-bottom:8px}.setup-panel{background:#fff;border:1px solid #dfe3ea;border-radius:8px;gap:28px;padding:28px;display:grid}.setup-row{justify-content:space-between;align-items:end;gap:24px;display:flex}.setup-row h2{margin:0 0 8px;font-size:1.55rem;line-height:1.1}.setup-row p{color:#5f6673;max-width:520px;margin:0;line-height:1.5}.preset-group{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.preset-group button,.start-button{color:#fff;background:#20232a;border:1px solid #20232a;border-radius:999px;min-height:42px;padding:0 16px}.preset-group button{color:#3b414d;background:#fff;border-color:#d8dce3}.preset-panel{border-top:1px solid #dfe3ea;border-bottom:1px solid #dfe3ea;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(280px,360px);align-items:end;gap:18px;padding:18px 0;display:grid}.preset-column{gap:10px;display:grid}.preset-column>span,.preset-save-field>span:first-child{color:#5f6673;text-transform:uppercase;font-size:.78rem;font-weight:800}.saved-preset-list{flex-wrap:wrap;gap:8px;display:flex}.saved-preset{background:#f6f3ee;border:1px solid #d8dce3;border-radius:999px;align-items:center;display:inline-flex;overflow:hidden}.saved-preset button{color:#3b414d;background:0 0;border:0;min-height:36px;padding:0 12px}.saved-preset-delete{font-weight:900;color:#b42335!important;border-left:1px solid #d8dce3!important;padding:0 10px!important}.field-grid,.lane-order{gap:16px;display:grid}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lane-order{grid-template-columns:repeat(4,minmax(0,1fr))}.lane-builder{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.lane-tile{color:#fff;cursor:grab;text-align:center;background:#20232a;border:1px solid #20232a;border-radius:8px;gap:8px;width:112px;min-height:154px;padding:18px 12px 12px;transition:opacity .16s,transform .16s;display:grid;position:relative}.lane-tile.dragging{opacity:.5;transform:scale(.98)}.lane-tile>span{color:#ffffffb8;text-transform:uppercase;font-size:.74rem;font-weight:800}.lane-key-picker{display:block}.lane-key-picker select{color:#fff;text-align:center;text-align-last:center;background:#5b7cfa;border:0;border-radius:8px;height:64px;min-height:64px;padding:0 24px 0 10px;font-size:2.1rem;font-weight:900}.lane-add-button,.lane-remove-button{border-radius:999px;justify-content:center;align-items:center;font-weight:900;line-height:1;display:inline-flex}.lane-add-button{color:#3b414d;background:#fff;border:1px solid #d8dce3;width:34px;height:34px}.lane-remove-button{color:#b42335;background:#fff;border:1px solid #d8dce3;width:26px;height:26px;position:absolute;top:-8px;right:-8px}.lane-add-button:disabled,.lane-remove-button:disabled{cursor:not-allowed;opacity:.36}.sr-only{width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.field-grid label,.lane-order label,.count-field{gap:8px;display:grid}.field-grid span,.lane-order span,.count-field span{color:#5f6673;text-transform:uppercase;font-size:.78rem;font-weight:800}.count-field input{color:#20232a;background:#fff;border:1px solid #d8dce3;border-radius:8px;width:110px;min-height:46px;padding:0 14px}.setup-error{color:#b42335;margin:0;font-weight:700}.setup-actions{border-top:1px solid #dfe3ea;justify-content:flex-end;align-items:center;gap:10px;padding-top:22px;display:flex}.preset-save-field{gap:6px;width:100%;display:grid}.preset-save-control{align-items:center;gap:8px;display:flex}.preset-save-field input{color:#20232a;background:#fff;border:1px solid #d8dce3;border-radius:8px;outline:none;flex:1;min-width:0;min-height:42px;padding:0 12px}.secondary-button{color:#3b414d;white-space:nowrap;background:#fff;border:1px solid #d8dce3;border-radius:999px;justify-content:center;align-items:center;min-height:42px;padding:0 16px;text-decoration:none;display:inline-flex}.start-button{min-width:120px}.start-button:disabled,.secondary-button:disabled{cursor:not-allowed;opacity:.45}.phaser-game{background:#fff;border:1px solid #dfe3ea;border-radius:8px;width:100%;height:min(760px,100svh - 178px);min-height:620px;overflow:hidden}.phaser-game canvas{display:block}@media (width<=920px){.app-shell{grid-template-columns:1fr}.app-content{padding:24px}.app-sidebar{z-index:20;border-bottom:1px solid #d8d2c8;border-right:0;grid-template-rows:auto;grid-template-columns:minmax(140px,auto) minmax(0,1fr) auto;gap:12px;min-height:auto;padding:14px 24px;position:sticky}.sidebar-brand{margin-bottom:0}.sidebar-nav{justify-content:center;align-self:center;display:flex}.account-nav{border-top:0;align-self:center;padding-top:0;display:flex}.play-view{min-height:calc(100svh - 48px)}.catalog-header,.play-header,.setup-row,.toolbar{grid-template-columns:1fr;align-items:stretch}.catalog-header,.play-header,.setup-row{display:grid}.catalog-summary{justify-items:start}.history-record{grid-template-columns:1fr}.skill-filter{justify-content:flex-start}.game-grid,.field-grid,.lane-order{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-panel{grid-template-columns:1fr;align-items:stretch}.setup-actions,.preset-save-control{grid-template-columns:1fr;align-items:stretch;display:grid}}@media (width<=560px){.app-content{padding:18px}.app-sidebar{grid-template-columns:1fr;align-items:stretch}.sidebar-nav,.account-nav{justify-content:stretch}.sidebar-nav{grid-template-columns:1fr 1fr;display:grid}.account-name{flex:1 0 auto}.game-grid{grid-template-columns:1fr}.game-card{min-height:320px}.field-grid,.lane-order{grid-template-columns:1fr}.lane-builder{grid-template-columns:34px 1fr 34px;align-items:stretch;display:grid}.lane-tile{width:100%}.setup-panel{padding:18px}.phaser-game{height:min(620px,100svh - 188px);min-height:460px}}