:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #302a39; background: #fff8eb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #fff 0, #fff8eb 42%, #f6e7d2 100%); }
a { color: #7a3ee0; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 10px; padding: .7rem 1rem; color: #fff; background: #7040ca; font-weight: 700; }
button:hover { background: #5d2bb4; }
button.secondary { color: #5d3878; background: #ede1fa; }
button.danger { background: #bc3b4c; }
.shell { width: min(1024px, calc(100% - 2rem)); margin: 0 auto; padding: 1.2rem 0 3rem; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.brand { color: #57318f; font-weight: 900; font-size: 1.2rem; text-decoration: none; }
.card { background: rgba(255,255,255,.92); border: 1px solid #eadcf5; box-shadow: 0 10px 32px rgba(95,50,132,.1); border-radius: 18px; padding: 1.25rem; }
.auth { width: min(440px, calc(100% - 2rem)); margin: 10vh auto; }
.auth h1 { margin-top: 0; }
label { display: grid; gap: .35rem; margin-bottom: .9rem; font-weight: 650; }
input, textarea, select { width: 100%; border: 1px solid #d7c6e4; border-radius: 9px; padding: .7rem; background: #fff; color: inherit; }
textarea { min-height: 84px; resize: vertical; }
.error { color: #ad2134; min-height: 1.35rem; margin: .65rem 0; }
.notice { color: #27723b; min-height: 1.35rem; margin: .65rem 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.row.space { justify-content: space-between; }
.game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1rem; }
.game-card h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.game-card p { min-height: 2.6rem; color: #665b6d; }
.empty { color: #756a7b; text-align: center; padding: 2rem; }
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.25rem; align-items: start; }
.level-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.level { min-height: 126px; padding: .45rem; border-radius: 12px; border: 2px dashed #dac9eb; display: grid; grid-template-rows: auto 1fr auto; gap: .3rem; text-align: center; background: #fcf9ff; }
.level img { max-width: 78px; width: min(100%, 78px); height: 70px; object-fit: cover; border-radius: 50%; place-self: center; }
.level.empty { color: #86798d; }
.level button { padding: .35rem .5rem; font-size: .78rem; background: #b85665; }
.drop-zone { display: grid; place-items: center; min-height: 138px; border: 2px dashed #ab80d9; border-radius: 14px; text-align: center; color: #68458a; margin: 1rem 0; padding: 1rem; }
.drop-zone.drag { background: #f1e7fc; }
.upload-queue { display:grid; gap:.5rem; margin:.8rem 0; }.queue-row { display:grid; grid-template-columns:42px minmax(110px,1fr) 105px minmax(120px,auto) auto; gap:.55rem; align-items:center; border:1px solid #e5d7ef; border-radius:10px; padding:.45rem; font-size:.85rem; }.queue-row img {width:42px;height:42px;border-radius:50%;object-fit:cover;background:#eee}.queue-row.failed,.queue-row.blocked{border-color:#e8abb3;background:#fff5f5}.queue-row.done{opacity:.7}.queue-state{color:#6d5b78}.queue-row.failed .queue-state,.queue-row.blocked .queue-state{color:#ad2134}.image-fallback{place-self:center;color:#86798d;font-size:.8rem}.level.selected{border-color:#7040ca;box-shadow:0 0 0 3px #e7dafa}.modal{position:fixed;inset:0;z-index:20;display:none;place-items:center;padding:1rem;background:rgba(41,24,61,.4)}.modal.show{display:grid}.modal-card{width:min(460px,100%)}.modal-card h2{margin-top:0}
.share { overflow-wrap: anywhere; padding: .75rem; border-radius: 10px; background: #f3edfa; color: #4f277a; }
.play-shell { width: min(620px, 100%); margin: 0 auto; padding: .6rem; }
.play-head { text-align: center; padding: .4rem 1rem .7rem; }
.play-head h1 { margin: .1rem; font-size: clamp(1.35rem, 5vw, 2rem); }
.play-head p { margin: .4rem; color: #6f6177; }
.play-tools{display:flex;justify-content:center;flex-wrap:wrap;gap:.45rem;margin:.5rem 0}.sound-toggle.off{opacity:.55;text-decoration:line-through}.theme-badge{padding:.35rem .6rem;border-radius:999px;background:#f0e7fb;color:#5d3878;font-size:.82rem}
#game-wrap { position: relative; aspect-ratio: 3 / 4.1; max-height: calc(100vh - 145px); margin: 0 auto; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 38px rgba(63,36,88,.25); background: #f3c76e; touch-action: none; }
#game-canvas { display: block; width: 100%; height: 100%; }
.score { position: absolute; top: 10px; left: 10px; padding: .45rem .7rem; background: rgba(255,255,255,.88); border-radius: 10px; font-weight: 800; color: #674097; }
.help { position: absolute; top: 10px; right: 10px; padding: .45rem .6rem; color: #75552d; background: rgba(255,248,225,.85); border-radius: 10px; font-size: .8rem; }
.game-over { position: absolute; inset: 0; display: none; place-content: center; text-align: center; padding: 2rem; background: rgba(47,27,67,.69); color: white; }
.game-over.show { display: grid; }
.game-over h2 { font-size: 2rem; margin: 0; }
.game-over button { margin-top: 1rem; background: #f2a83b; }
.loading-cover{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:4;padding:2rem;background:rgba(255,250,239,.94)}.loading-cover.hidden{display:none}.spinner{width:32px;height:32px;border:4px solid #e2d2f4;border-top-color:#7040ca;border-radius:50%;margin:auto;animation:spin .8s linear infinite}.load-warning{position:absolute;z-index:3;left:.7rem;right:.7rem;bottom:.7rem;padding:.6rem;border-radius:9px;background:#fff2c9;color:#795616;text-align:center}.load-warning button{margin-left:.5rem;padding:.35rem .55rem;font-size:.78rem}@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width: 700px) { .shell { width: min(100% - 1rem, 1024px); } .editor-grid { grid-template-columns: 1fr; } .level-list { grid-template-columns: repeat(4, 1fr); } .nav { margin-bottom: 1rem; } .queue-row { grid-template-columns:42px minmax(0,1fr) 96px; } .queue-state { grid-column:2 / -1; } .queue-row button { grid-column:2 / -1; } }
@media (max-width: 440px) { .level-list { grid-template-columns: repeat(3, 1fr); } .level { min-height: 105px; } }