:root{--color-correct: #538d4e;--color-present: #b59f3b;--color-absent: #3a3a3c;--color-empty: #121213;--color-border: #3a3a3c;--color-border-active: #565758;--color-key-bg: #818384;--color-tbd-border: #565758;--tile-size: 56px;--gap: 4px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Helvetica Neue,Arial,sans-serif;background:#121213;color:#fff;overflow:hidden}.app{display:flex;flex-direction:column;height:100%;max-width:500px;margin:0 auto}header{display:flex;align-items:center;justify-content:center;border-bottom:1px solid #3a3a3c;padding:8px 0}header h1{font-size:1.6rem;font-weight:700;letter-spacing:.15em}.board-container{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}.board{display:flex;flex-direction:column;gap:var(--gap);perspective:600px}.row{display:flex;gap:var(--gap)}.tile{width:var(--tile-size);height:var(--tile-size);display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:700;text-transform:uppercase;border:2px solid var(--color-border);border-radius:2px;background:var(--color-empty);-webkit-user-select:none;user-select:none;transform-style:preserve-3d;transition:transform .1s}.tile.tbd{border-color:var(--color-tbd-border)}.tile.current{border-color:var(--color-border-active);animation:pop .1s ease-in-out}.tile.revealed.correct{animation:flip-correct .5s ease both}.tile.revealed.present{animation:flip-present .5s ease both}.tile.revealed.absent{animation:flip-absent .5s ease both}.tile.correct{background:var(--color-correct);border-color:var(--color-correct)}.tile.present{background:var(--color-present);border-color:var(--color-present)}.tile.absent{background:var(--color-absent);border-color:var(--color-absent)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes flip-correct{0%{transform:rotateX(0);background:var(--color-empty);border-color:var(--color-border)}50%{transform:rotateX(90deg);background:var(--color-empty);border-color:var(--color-border)}51%{background:var(--color-correct);border-color:var(--color-correct)}to{transform:rotateX(0);background:var(--color-correct);border-color:var(--color-correct)}}@keyframes flip-present{0%{transform:rotateX(0);background:var(--color-empty);border-color:var(--color-border)}50%{transform:rotateX(90deg);background:var(--color-empty);border-color:var(--color-border)}51%{background:var(--color-present);border-color:var(--color-present)}to{transform:rotateX(0);background:var(--color-present);border-color:var(--color-present)}}@keyframes flip-absent{0%{transform:rotateX(0);background:var(--color-empty);border-color:var(--color-border)}50%{transform:rotateX(90deg);background:var(--color-empty);border-color:var(--color-border)}51%{background:var(--color-absent);border-color:var(--color-absent)}to{transform:rotateX(0);background:var(--color-absent);border-color:var(--color-absent)}}.toast{position:fixed;top:10%;left:50%;transform:translate(-50%);background:#fff;color:#121213;padding:10px 20px;border-radius:6px;font-size:.85rem;font-weight:600;z-index:100;animation:fade-in .15s ease;pointer-events:none}@keyframes fade-in{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.status{text-align:center;padding:10px}.status-win{font-size:1.2rem;font-weight:700}.status-lose{font-size:.9rem;color:#ffffffb3}.status-lose span,.status-lose{font-weight:600}.play-again{margin-top:8px;padding:8px 24px;background:var(--color-correct);color:#fff;border:none;border-radius:16px;font-size:.9rem;font-weight:600;cursor:pointer}.play-again:hover{opacity:.9}.secondary-actions{display:flex;gap:10px;margin-top:10px;justify-content:center}.share-btn{padding:8px 24px;background:var(--color-present);color:#fff;border:none;border-radius:16px;font-size:.9rem;font-weight:600;cursor:pointer}.share-btn:hover{opacity:.9}.donate-btn{padding:8px 24px;background:#7b2d8e;color:#fff;border:none;border-radius:16px;font-size:.9rem;font-weight:600;cursor:pointer}.donate-btn:hover{opacity:.9}.share-menu{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:12px;padding:16px 20px;background:#2a2a2c;border-radius:12px;border:1px solid #3a3a3c;animation:fade-in .15s ease}.share-menu-header{font-size:1rem;font-weight:700;color:#fff;width:100%;display:flex;align-items:center;justify-content:space-between}.share-menu-close{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fffc;font-size:1rem;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .2s,color .2s;flex-shrink:0}.share-menu-close:hover{background:#fff3;color:#fff}.share-menu-preview{text-align:center;font-size:.85rem;color:#fffc;line-height:1.6;white-space:pre-line}.share-option{display:block;width:100%;padding:10px 20px;border-radius:8px;font-size:.9rem;font-weight:600;text-decoration:none;text-align:center;cursor:pointer;transition:opacity .2s}.share-option:hover{opacity:.85}.share-x{background:#000;color:#fff}.share-text{background:var(--color-correct);color:#fff}.share-gitlawb{background:linear-gradient(135deg,#ff6b35,#f7931a);color:#fff}.share-eth{background:linear-gradient(135deg,#627eea,#3c5bd8);color:#fff}.share-sol{background:linear-gradient(135deg,#9945ff,#14f195);color:#fff}.keyboard{padding:4px 8px 8px;display:flex;flex-direction:column;gap:4px;align-items:center}.kb-row{display:flex;gap:4px}.kb-key{height:62px;min-width:38px;padding:0 7px;border:none;border-radius:5px;background:var(--color-key-bg);color:#fff;font-size:.95rem;font-weight:700;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:background .2s}.kb-key.wide{min-width:65px;font-size:.75rem}.kb-key:active{opacity:.8}.kb-key.correct{background:var(--color-correct)}.kb-key.present{background:var(--color-present)}.kb-key.absent{background:var(--color-absent)}@media(max-height:700px){:root{--tile-size: 48px;--gap: 3px}.kb-key{height:52px;min-width:32px;font-size:.8rem}.kb-key.wide{min-width:55px}header{padding:6px 0}header h1{font-size:1.4rem}.tile{font-size:1.5rem}}@media(max-height:600px){:root{--tile-size: 42px}.kb-key{height:44px;min-width:28px}.kb-key.wide{min-width:48px}}@media(max-width:380px){:root{--tile-size: 48px}.kb-key{min-width:30px}}