:root { font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif; color: #211557; background: #fff1fa; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; }
main { width: min(1400px, 100%); padding: 12px 16px; }
.page-heading { display: flex; justify-content: space-between; gap: 12px; margin: 0 4px 10px; font-size: 14px; font-weight: bold; }
.page-heading span:last-child { color: #785178; font-weight: normal; }
.game { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; border: 3px solid #331d68; border-radius: 24px; box-shadow: 0 9px 0 #e5c4e5; container-type: inline-size; isolation: isolate; }
.background { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; z-index: -1; }
button { font: inherit; font-weight: 900; color: #211557; border: 3px solid #39256e; border-radius: 999px; cursor: pointer; box-shadow: inset 0 0 0 3px #fff, 0 4px 0 #6e378c; transition: filter .15s; -webkit-tap-highlight-color: transparent; }
button:hover:not(:disabled) { filter: brightness(1.09); }
button:focus-visible, .game:focus-visible { outline: 4px solid #fff; outline-offset: -7px; }
button:active:not(:disabled), button.held { filter: brightness(.9); }
.pink { background: #ff70c5; }
.blue { background: #7ee6ff; }
.coins { position: absolute; top: 3%; left: 2%; background: #fff9ec; border: 3px solid #39256e; border-radius: 99px; padding: .5cqw 2cqw .5cqw .6cqw; display: flex; gap: .7cqw; align-items: center; font-weight: 900; font-size: 2.5cqw; box-shadow: 0 3px 0 #eb75c1; }
.coin { background: #ffdc48; border: 3px solid #dc941b; border-radius: 50%; display: grid; place-items: center; width: 3.8cqw; height: 3.8cqw; }
.shop-status { position:absolute;top:3%;left:2%;width:27%;display:grid;justify-items:start;gap:1cqw;z-index:3; }
.shop-status .coins { position:static; }
#selected-machine { position:absolute;left:28%;bottom:5%;width:35%;padding:.8cqw 1cqw;border-radius:16px;display:grid;gap:.3cqw;font-size:clamp(10px,1.5cqw,21px);min-height:44px; }
.selected-caption { font-size:.75em;font-weight:normal; }
#selected-machine:disabled { cursor:default;background:#edf3fc; }
#selected-machine:focus-visible { outline:3px dashed #39256e;outline-offset:3px; }
.menu { position: absolute; right: 2%; top: 3%; display: grid; justify-items: end; gap: .8cqw; }
.menu button { padding: .8cqw 1.8cqw; font-size: 2cqw; min-height: 36px; }
.menu button:last-child { font-size: 1.45cqw; }
.player { position: absolute; left: 40%; bottom: 25%; height: 29%; width: 11%; transform: translateX(-50%); z-index: 2; pointer-events: none; }
.player > img,.player > svg { width: 100%; height: 100%; object-fit: contain; transform: scaleX(var(--facing, 1)); transform-origin: bottom center; }
.player.walking > img,.player.walking > svg { animation: walk .24s ease-in-out infinite alternate; }
.player { display: flex; justify-content: center; width:18%; }
.detailed-avatar { display:block; width:100%; height:100%; min-width:0; }
.detailed-avatar .avatar-frame { display:block; width:100%; height:100%; }
.player .detailed-avatar svg { transform:none; animation:none; }
.player .detailed-avatar { transform: scaleX(var(--facing,1)); transform-origin: bottom center; }
.player.walking .detailed-avatar { animation: walk .24s ease-in-out infinite alternate; }
@keyframes walk { from { transform: scaleX(var(--facing, 1)) rotate(-3deg) translateY(0); } to { transform: scaleX(var(--facing, 1)) rotate(3deg) translateY(-3%); } }
.machine { position: absolute; left: 52.5%; bottom: 25.5%; transform: translateX(-50%); height: 18%; width: 7%; object-fit: contain; }
.machine { filter:hue-rotate(var(--machine-hue,0deg)); }
.machine[role="button"] { cursor:pointer; }
.machine:focus-visible { outline:2px dashed #592f9a;outline-offset:-2px;border-radius:8px; }
.machine.near { filter:hue-rotate(var(--machine-hue,0deg)) drop-shadow(0 0 8px #fff5a0); }
.food-machine { left:47.5%; }
.food-colors { filter:hue-rotate(45deg); }
.food-machine.near { filter:hue-rotate(45deg) drop-shadow(0 0 8px #fff5a0); }
.machine-label { position:absolute; bottom:44%; transform:translateX(-50%); padding:.3cqw .6cqw; background:#fff5fc; border:2px solid #b69bd4; border-radius:12px; font-size:1.25cqw; font-weight:bold; }
.food-label { left:47.5%; transform:translateX(-85%); }
.animals-label { left:52.5%; transform:translateX(-15%); }
.machine-badge { position:absolute;left:52.5%;bottom:32%;width:3%;aspect-ratio:1;transform:translateX(-50%);display:grid;place-items:center;background:#fff3fb;border:2px solid #b75394;border-radius:50%;pointer-events:none;box-shadow:0 2px 3px #39256e44; }
.machine-badge img { width:90%;height:90%;object-fit:contain; }
.machine-badge { font-size:1.8cqw;line-height:1; }
#machines .machine-label { font-size:.95cqw;padding:.3cqw .25cqw;white-space:nowrap; }
.food-badge { left:47.5%;background:#efffff;border-color:#32a9bc; }
.controls { position: absolute; left: 3%; bottom: 4%; display: flex; gap: 2cqw; }
.arrow { width: 10cqw; height: 8cqw; font-size: 5.5cqw; line-height: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
.play { position: absolute; right: 3%; bottom: 5%; width: 30%; padding: 1.4cqw 1cqw; background: #ffe350; font-size: 2.5cqw; min-height: 44px; }
.play:disabled { background: #edf3fc; color: #66738b; cursor: default; box-shadow: inset 0 0 0 3px #fff, 0 4px 0 #6e378c; }
.hint { position: absolute; left: 28%; bottom: 5%; width: 35%; margin: 0; padding: .7cqw; text-align: center; font-size: 1.5cqw; font-weight: bold; line-height: 1.4; color: #172755; background: #eafaffec; border-radius: 14px; }
.instructions { text-align: center; font-size: 15px; margin: 20px 0 4px; line-height: 1.7; }
kbd { background: white; border: 1px solid #d5bbdc; border-radius: 5px; padding: 2px 8px; }
.rotate { display: none; text-align: center; }
.save-status { text-align: center; font-size: 13px; color: #625278; margin: 6px 0; }
.save-warning { color: #8f2039; font-weight: bold; }
@media (orientation: landscape) and (max-height: 600px) { .save-status { margin: 2px 0; font-size: 11px; } main { width: min(100%, calc((100dvh - 35px) * 16 / 9)); } }
dialog { width: min(460px, 90vw); border: 4px solid #39256e; border-radius: 28px; background: #fff5fc; color: #211557; padding: 28px; text-align: center; box-shadow: 0 12px 0 #8c4285; }
dialog::backdrop { background: #21155799; }
dialog h1 { margin-top: 0; font-size: 25px; }
dialog p { line-height: 1.6; }
dialog button { padding: 12px 22px; margin-top: 10px; }
@media (orientation: portrait) and (max-width: 700px) { .rotate { display: block; } main { padding: 8px; } .game { border-radius: 15px; } .menu button { min-height: 24px; } .play { min-height: 28px; } .instructions { font-size: 13px; } }
@media (orientation: landscape) and (max-height: 600px) { main { width: min(100%, calc((100dvh - 12px) * 16 / 9)); padding: 0; } .page-heading, .instructions { display: none; } .game { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .player.walking > img,.player.walking > svg { animation: none; } button { transition: none; } }

#draw-dialog { width: min(760px, 94vw); max-height: 94dvh; padding: 20px 28px; overflow: auto; }
#draw-dialog h1 { margin: 0 0 8px; }
#draw-status { margin: 12px 0; font-size: 15px; min-height: 24px; }
#draw-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
#draw-actions button { margin: 0; font-size: 15px; }
.ball-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 380px; margin: 0 auto; }
.ball-choice { background: #e9faff; border-radius: 22px; padding: 5px; margin: 0; aspect-ratio: 1; min-width: 44px; box-shadow: 0 3px 0 #9e87b9; }
.ball-choice img { display: block; width: 100%; height: 100%; object-fit: contain; filter: hue-rotate(var(--hue)); }
.dispense-scene { height: min(320px, 45dvh); position: relative; overflow: hidden; }
.dispense-scene > img:first-child { position: absolute; height: 80%; left: 16%; bottom: 0; }
.rolling-ball { position: absolute; width: 20%; height: 40%; object-fit: contain; left: 27%; bottom: 0; animation: roll-out 1.3s ease-in-out forwards; }
@keyframes roll-out { from { transform: translate(0,-70%) scale(.35); opacity: 0; } 25% { opacity: 1; } to { transform: translateX(160%) rotate(340deg); opacity: 1; } }
.opening-scene,.reveal-scene { height: min(300px, 45dvh); display: grid; place-items: center; position: relative; overflow: hidden; }
.big-capsule { height: min(300px, 45dvh); width: min(300px, 45dvh); max-width: 100%; min-height: 0; min-width: 0; background: transparent; border: 0; box-shadow: none; margin: 0; padding: 6px; position: relative; touch-action: manipulation; }
.big-capsule img { height: 100%; width: 100%; object-fit: contain; }
.big-capsule:focus-visible { outline: 3px solid #592f9a; border-radius: 30px; }
.wiggle { animation: capsule-wiggle .35s ease-in-out; }
@keyframes capsule-wiggle { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.crack { display: none; position: absolute; width: 10%; height: 43%; left: 47%; top: 25%; background: #342052; clip-path: polygon(35% 0,75% 30%,45% 52%,80% 76%,45% 100%,51% 75%,15% 52%,46% 28%); }
.cracked .crack { display: block; }
.reveal-scene > img { height: min(300px, 45dvh); width: 100%; min-height: 0; min-width: 0; object-fit: contain; animation: toy-appear .45s ease-out; }
@keyframes toy-appear { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confetti { position: absolute; left: var(--x); top: -15px; width: 9px; height: 16px; background: var(--color); border-radius: 3px; animation: fall 1.9s var(--delay) ease-in forwards; pointer-events: none; }
@keyframes fall { to { transform: translateY(360px) rotate(520deg); } }
.toy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.toy-grid article { background: #e9faff; border: 2px solid #b69bd4; border-radius: 20px; padding: 10px; }
.toy-grid img,.mystery { width: 100%; height: min(180px, 28dvh); object-fit: contain; }
.mystery { display: grid; place-items: center; font-size: 70px; color: #9079b8; }
.toy-grid h2 { font-size: 16px; margin: 6px 0; }
.toy-grid p { margin: 4px 0; font-weight: bold; }
.toy-grid .toy-picture { width:100%;height:min(150px,24dvh);object-fit:contain; }
.reveal-scene > .toy-picture { height:min(300px,45dvh);width:100%;object-fit:contain; }
.collection-heading { grid-column:1/-1;text-align:left;font-size:19px;margin:16px 0 0; }
.collection-filters { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:sticky;top:0;background:#fff5fc;padding:8px 4px 16px;z-index:1; }
.collection-filters button { flex:1;margin:0;padding:12px 8px;min-height:48px;opacity:.65; }
.collection-filters button[aria-pressed="true"] { opacity:1;outline:3px solid #6c329c;outline-offset:3px; }
.collection-filters button:focus-visible { outline:3px dashed #211557;outline-offset:4px; }
.collection-panel { border:3px solid #eb8cc7;border-radius:22px;background:#ffe8f6;padding:14px; }
.collection-food { border-color:#62cddd;background:#e4faff; }
.collection-panel .collection-heading { margin:0;text-align:center;font-size:20px; }
.collection-progress { margin:6px 0 16px;font-size:14px; }
.collection-animals .toy-grid article { background:#fff7fc; }
.collection-food .toy-grid article { background:#f5feff;border-color:#9cd9e5; }
@media (max-width:500px) { .collection-panel { padding:10px; } .collection-panel .toy-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; } }
.pink { background:linear-gradient(#ffb7ec 0%,#ff63c9 42%,#ef36ac 65%,#f76abc 100%); }
.blue { background:linear-gradient(#e5ffff 0%,#87edff 42%,#2bd6f6 70%,#9cefff 100%); }
.menu button,.arrow,.play,.avatar-actions button,#draw-actions button { border:3px solid #39256e;outline:3px solid #fff;box-shadow:inset 0 0 0 3px #fff9,inset 0 -6px 0 #9b278d55,0 5px 0 #291b6855; }
.menu button { text-shadow:0 1px 0 #fff8; }
#collection { color:white;text-shadow:2px 2px 0 #7a1e7e,-1px -1px 0 #7a1e7e;padding-right:5cqw;position:relative; }
#collection::after { content:'★';position:absolute;right:1cqw;top:12%;width:2.7cqw;height:75%;display:grid;place-items:center;background:linear-gradient(135deg,#b9ffff,#00bfea);border:2px solid #31216e;border-radius:6px;transform:rotate(12deg);color:#ffdb42;box-shadow:inset 0 0 0 2px white; }
.arrow { width:10cqw;height:10cqw;border-radius:50%;display:grid;place-items:center;padding:1.5cqw; }
.arrow svg { width:100%;height:100%;filter:drop-shadow(0 2px 0 #8a278d88); }
.play:not(:disabled) { background:linear-gradient(#fffca1,#ffe64d 48%,#ffcf36 75%,#ffe775);text-shadow:0 1px 0 #fff8; }
@media (max-height: 500px) { #draw-dialog { padding: 10px 18px; } #draw-dialog h1 { font-size: 21px; } .ball-grid { max-width: 225px; gap: 4px; } #draw-status { margin: 7px 0; font-size: 13px; } #draw-actions button { padding: 8px 16px; } }
@media (prefers-reduced-motion: reduce) { .rolling-ball { animation: none; transform: translateX(160%); } .wiggle,.reveal-scene > img,.confetti { animation: none; } .confetti { display: none; } }
@media (orientation: landscape) and (max-height: 600px) { main { width: min(100%, calc((100dvh - 35px) * 16 / 9)); } }

.cloud-panel { margin: 14px auto; font-size: 14px; }
.rarity-badge { display:inline-block; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:bold; border:1px solid currentColor; }
.rarity-common { background:#e7f6f3; color:#246358; }
.rarity-rare { background:#e8eeff; color:#344c96; }
.rarity-veryRare { background:#fff0cf; color:#825700; }
.welcome { width:min(950px,96vw); margin:24px auto; padding:clamp(24px,6vw,72px) 20px; box-sizing:border-box; border:3px solid #c9a5e4; border-radius:32px; background:linear-gradient(120deg,#fff1fae8,#dffaffdd),url('assets/shop.png') center/cover; box-shadow:0 12px 0 #ebc4e4; }
.welcome-card { max-width:480px; margin:auto; padding:30px 24px; border:2px solid white; border-radius:28px; background:#ffffffed; box-shadow:0 10px 35px #8d3a9c22; }
.welcome h1 { font-size:clamp(30px,6vw,48px); color:#963aab; margin:14px 0; }
.welcome-tag { color:#79598b; font-size:13px; letter-spacing:1px; }
.welcome-card > button { width:100%; margin:10px 0; padding:16px; }
.welcome-benefit,.welcome-note { font-size:13px; color:#705780; line-height:1.6; }
.welcome-divider { margin:24px 0 12px; color:#967aa2; font-size:13px; }
.save-tools { display:inline-block; vertical-align:middle; margin:8px; }
.save-tools summary { cursor:pointer; font-size:12px; }
.cloud-panel button { font-size: 13px; padding: 9px 14px; margin: 4px; }
[hidden] { display: none !important; }
#account-dialog,#import-dialog { width: min(480px,90vw); max-height: 90dvh; overflow: auto; }
#account-form label { display: block; text-align: left; margin: 12px 0 5px; }
#account-form input { box-sizing: border-box; width: 100%; padding: 12px; border: 2px solid #c9a5e4; border-radius: 12px; font: inherit; }
#account-error,#import-error { color: #9b225a; }
#avatar-dialog { width: min(850px, 96vw); max-height: 94dvh; overflow: auto; padding: 22px 26px; }
#avatar-dialog h1 { margin: 0; }
.avatar-subtitle { margin: 6px 0 18px; font-size: 14px; color: #6e527b; }
.avatar-layout { display: grid; grid-template-columns: 34% 1fr; gap: 22px; align-items: center; }
.avatar-preview-wrap { min-width:0; border: 2px solid #c9a5e4; background: #e8faff; border-radius: 26px; padding: 12px; }
#avatar-preview { height: 300px; }
#avatar-preview { display: flex; justify-content: center; overflow: hidden; }
#avatar-preview .avatar-frame { display: block; width: 100%; height: 100%; }
.avatar-preview-wrap p { margin: 0; font-size: 13px; color: #6e527b; }
#avatar-options { text-align: left; min-width: 0; }
#avatar-options fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
#avatar-options legend { font-weight: bold; font-size: 17px; margin-bottom: 8px; }
.avatar-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-option { border-radius: 14px; background: #fff; border: 2px solid #d0b7e0; padding: 10px 12px; margin: 0; box-shadow: none; font-size: 13px; min-height: 44px; }
.avatar-option[aria-pressed="true"] { border-color: #6c329c; background: #ffe0f4; box-shadow: 0 0 0 2px #6c329c; }
.avatar-option:focus-visible { outline: 3px dashed #512586; outline-offset: 4px; }
.hair-color-option::before { content:''; display:inline-block; width:15px; height:15px; border-radius:50%; background:var(--hair-color); border:1px solid #39256e66; vertical-align:middle; margin-right:6px; }
.skin-option { width: 44px; height: 44px; background: var(--skin); padding: 0; border-radius: 50%; }
.skin-option[aria-pressed="true"] { background: var(--skin); box-shadow: 0 0 0 2px #fff,0 0 0 5px #6c329c; }
.avatar-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .player.walking .detailed-avatar { animation: none; } }
.avatar-actions button { margin: 0; padding: 11px 20px; font-size: 15px; }
@media (max-height: 550px) and (orientation: landscape) {
  #avatar-dialog { padding: 10px 20px; }
  #avatar-dialog h1 { font-size: 21px; }
  .avatar-subtitle { margin: 2px 0 8px; font-size: 12px; }
  .avatar-layout { grid-template-columns: 24% 1fr; gap: 18px; }
  #avatar-preview { height: 190px; }
  .avatar-preview-wrap { padding: 2px; }
  #avatar-options fieldset { margin-bottom: 9px; }
  #avatar-options legend { font-size: 14px; margin-bottom: 5px; }
  .avatar-option { padding: 6px 10px; min-height: 38px; font-size: 12px; }
  .skin-option { width: 38px; height: 38px; }
  .avatar-actions { margin-top: 4px; }
  .avatar-actions button { padding: 8px 18px; font-size: 13px; }
}
@media (max-width: 550px) and (orientation: portrait) {
  #avatar-dialog { padding: 15px; }
  .avatar-layout { grid-template-columns: 1fr; gap: 12px; }
  #avatar-preview { height: 155px; }
  .avatar-preview-wrap p { display: none; }
  .avatar-subtitle { margin-bottom: 10px; }
  .avatar-actions { justify-content: center; flex-wrap: wrap; }
}