@media (max-width: 480px){input,.key-tile,.result-tile{width:36px!important;height:36px!important;font-size:22px!important}}html,body{margin:0;padding:0;background:#f6f7f8;font-family:Arial,sans-serif;height:100%}#root{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.tile{position:relative;width:42px;height:42px;margin:0 4px;perspective:600px;transform-style:preserve-3d;transform:rotateY(0)}.tile-face{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid #d3d6da;text-align:center;line-height:42px;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;transition:transform .6s ease;transform-style:preserve-3d;z-index:1}.tile-front{background-color:#fff;color:#000;transform:rotateY(0)}.tile-back{color:#fff;transform:rotateY(180deg)}.tile.flip .tile-front{transform:rotateY(180deg)}.tile.flip .tile-back{transform:rotateY(0)}.tile{transform-style:preserve-3d;transition:transform .6s ease}.tile.flip.green .tile-back{animation:pop .25s ease-out}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}.tile.flip.green .tile-back{animation:pop .35s ease-out}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-4px)}to{transform:translate(0)}}.shake{animation:shake .3s ease}body.light{background:#f6f7f8;color:#000}body.dark{background:#1e1e1e;color:#e0e0e0}body.dark .tile-front{background-color:#333;color:#fff;border-color:#888}body.dark .tile-back.green{background-color:#538d4e}body.dark .tile-back.yellow{background-color:#b59f3b}body.dark .tile-back.gray{background-color:#3a3a3c}body.dark .key-tile{background-color:#222!important;color:#eee!important;border-color:#888!important}