*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{font-family:-apple-system,Segoe UI,system-ui,sans-serif;background:#f5f5f0;color:#222;display:flex;flex-direction:column;align-items:center;padding:clamp(12px,2vw,24px);gap:clamp(14px,3vw,28px);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.version-label{font-size:13px;color:#999;text-align:center;margin-top:8px}body.case-upper .pattern-text,body.case-upper .slot,body.case-upper .tile,body.case-upper .keyboard-key,body.case-upper .keyboard-popup-key,body.case-upper .textfield{text-transform:uppercase}body.case-lower .pattern-text,body.case-lower .slot,body.case-lower .tile,body.case-lower .keyboard-key,body.case-lower .keyboard-popup-key,body.case-lower .textfield{text-transform:lowercase}@media(max-width:380px){.pattern{padding:10px 16px;gap:10px;min-height:80px}.slot,.tile{width:56px;height:68px;font-size:32px}.slots.wide .slot,.bank.wide .tile{width:80px;font-size:24px}.keyboard-key{width:30px;height:40px;font-size:16px}.keyboard-key.wide-key{width:46px;font-size:12px}.keyboard-key.space-key{width:120px;font-size:12px}.splash-button{min-width:90px;padding:12px 16px;font-size:18px}.splash-button-icon{font-size:28px}}@media(min-width:1200px){.keyboard{max-width:800px}.keyboard-key{width:68px;height:78px;font-size:32px}.keyboard-key.wide-key{width:100px;font-size:24px}.keyboard-key.space-key{width:280px;font-size:20px}.slot,.tile{width:120px;height:140px;font-size:72px}.slots.wide .slot,.bank.wide .tile{width:180px;font-size:56px}.textfield{font-size:56px;min-height:90px}}.settings-btn{position:fixed;top:16px;left:16px;width:clamp(44px,8vw,56px);height:clamp(44px,8vw,56px);border-radius:50%;border:3px solid #888;background:#fff;font-size:clamp(22px,4vw,28px);cursor:pointer;z-index:1100;display:flex;align-items:center;justify-content:center;padding:0;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 6px #0000001a}.settings-btn:hover{transform:rotate(30deg);box-shadow:0 4px 12px #00000026}.settings-btn:active{transform:rotate(30deg) scale(.95)}#gameArea{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3vw,24px);width:100%}@keyframes wiggle{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.splash{position:fixed;inset:0;background:linear-gradient(135deg,#ffe8a8,#ffc870);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,5vw,40px);z-index:1000;transition:opacity .4s}.splash.hidden{opacity:0;pointer-events:none}.splash-title{font-size:clamp(32px,8vw,56px);font-weight:800;color:#5a3a00;text-align:center;margin:0;padding:0 20px}.splash-emoji{font-size:clamp(70px,18vw,120px);line-height:1;animation:wiggle 2s ease-in-out infinite}.splash-buttons{display:flex;gap:clamp(12px,3vw,24px);flex-wrap:wrap;justify-content:center}.splash-button{font-family:inherit;font-size:clamp(20px,4vw,28px);font-weight:700;padding:clamp(14px,3vw,20px) clamp(20px,4vw,36px);border:5px solid #8a5a00;border-radius:24px;background:#fff;color:#5a3a00;cursor:pointer;box-shadow:0 6px #8a5a00;transition:transform .1s,box-shadow .1s;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:clamp(100px,20vw,140px)}.splash-button:active{transform:translateY(4px);box-shadow:0 2px #8a5a00}.splash-button-icon{font-size:clamp(32px,8vw,48px);line-height:1}.modal-backdrop{position:fixed;inset:0;background:#00000080;display:none;align-items:center;justify-content:center;z-index:2000;padding:20px}.modal-backdrop.visible{display:flex}.modal{background:#fff;border-radius:20px;padding:clamp(20px,4vw,32px);max-width:560px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.modal-title{font-size:clamp(22px,4vw,28px);font-weight:700;margin:0 0 24px;color:#333}.setting-group{margin-bottom:24px}.setting-label{font-size:clamp(15px,2.5vw,18px);font-weight:600;color:#555;margin-bottom:12px}.setting-options{display:flex;flex-direction:column;gap:12px}.setting-option{display:flex;align-items:flex-start;gap:14px;padding:clamp(10px,2vw,16px);border:3px solid #e0e0e0;border-radius:14px;cursor:pointer;transition:all .15s}.setting-option:hover{border-color:#b0b0b0;background:#f8f8f8}.setting-option input[type=radio]{margin-top:4px;transform:scale(1.4);cursor:pointer}.setting-option:has(input:checked){border-color:#6aa86a;background:#f0f8f0}.setting-option-content{flex:1}.setting-option-title{font-size:clamp(15px,2.5vw,18px);font-weight:600;color:#333;margin-bottom:4px}.setting-option-desc{font-size:clamp(13px,2vw,15px);color:#666;line-height:1.4}.setting-option-note{font-size:clamp(11px,1.8vw,13px);color:#a06000;margin-top:6px;font-style:italic}.modal-actions{display:flex;justify-content:flex-end;margin-top:16px}.modal button{font-family:inherit;font-size:clamp(16px,3vw,22px);font-weight:600;padding:clamp(10px,2vw,16px) clamp(16px,3vw,28px);border:3px solid #888;border-radius:14px;background:#fff;color:#333;cursor:pointer;transition:all .15s;min-height:clamp(44px,8vw,60px)}.modal button:hover{background:#f0f0e8;transform:translateY(-2px)}.modal button:active{transform:translateY(0)}.modal button.primary{background:#6aa86a;border-color:#4a8a4a;color:#fff}.modal button.primary:hover{background:#5a985a}.pattern{display:flex;align-items:center;gap:clamp(12px,3vw,24px);background:#fff;border:4px solid #e0d8c0;border-radius:20px;padding:clamp(12px,2vw,20px) clamp(20px,4vw,40px);cursor:pointer;transition:transform .15s;min-height:clamp(90px,18vw,140px)}.pattern:hover{transform:scale(1.02)}.pattern:active{transform:scale(.98)}.pattern-image{font-size:clamp(50px,12vw,96px);line-height:1}.pattern-text{font-size:clamp(40px,10vw,76px);font-weight:700;letter-spacing:clamp(2px,.5vw,4px);color:#3a3a3a}.slots{display:flex;gap:clamp(8px,2vw,16px);justify-content:center;flex-wrap:wrap}.slot{width:clamp(64px,14vw,110px);height:clamp(78px,17vw,130px);border:4px dashed #b8a888;border-radius:clamp(10px,2vw,16px);background:#fffef8;display:flex;align-items:center;justify-content:center;font-size:clamp(36px,8vw,68px);font-weight:700;color:#2a6a2a;cursor:pointer;transition:all .2s}.slot.filled{border-style:solid;border-color:#6aa86a;background:#e8f5e8}.slot.filled:hover{background:#d8ebd8}@keyframes celebrate{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.slot.celebrate{animation:celebrate .5s;background:#fff4a8;border-color:#d4a820}.slots.wide .slot{width:clamp(90px,22vw,170px);font-size:clamp(28px,6vw,52px)}.progress{font-size:clamp(14px,2.5vw,18px);color:#666;font-weight:500}.bank{display:flex;gap:clamp(8px,2vw,16px);justify-content:center;flex-wrap:wrap;max-width:900px}.tile{width:clamp(64px,14vw,110px);height:clamp(78px,17vw,130px);border:4px solid #7088b8;border-radius:clamp(10px,2vw,16px);background:#e8eef8;display:flex;align-items:center;justify-content:center;font-size:clamp(36px,8vw,68px);font-weight:700;color:#236;cursor:pointer;transition:transform .15s,background .15s}.tile:hover:not(.used){transform:translateY(-4px);background:#d8e4f4}.tile:active:not(.used){transform:translateY(0)}.tile.used{opacity:.25;cursor:default;pointer-events:none}.tile.shake{animation:shake .4s;background:#f5d8d8;border-color:#c87070}.bank.wide .tile{width:clamp(90px,22vw,170px);font-size:clamp(28px,6vw,52px)}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-8px)}80%{transform:translate(8px)}}.keyboard{display:flex;flex-direction:column;gap:clamp(4px,1vw,8px);align-items:center;width:100%;max-width:720px;position:relative}.keyboard-row{display:flex;gap:clamp(3px,.7vw,6px);justify-content:center}.keyboard-key{width:clamp(34px,8vw,64px);height:clamp(42px,10vw,74px);border:clamp(2px,.4vw,3px) solid #7088b8;border-radius:clamp(6px,1.2vw,10px);background:#e8eef8;display:flex;align-items:center;justify-content:center;font-size:clamp(18px,4vw,30px);font-weight:600;color:#236;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .1s,background .1s;position:relative}.keyboard-key:active{transform:scale(.92);background:#d8e4f4}.keyboard-key.has-variants:after{content:"•";position:absolute;top:1px;right:clamp(3px,.6vw,6px);font-size:clamp(10px,1.8vw,14px);color:#a06000;line-height:1}.keyboard-key.shake{animation:shake .4s;background:#f5d8d8;border-color:#c87070}.keyboard-key.wide-key{width:clamp(54px,12vw,94px);font-size:clamp(14px,3vw,22px)}.keyboard-key.space-key{width:clamp(140px,32vw,260px);font-size:clamp(14px,2.5vw,18px)}.keyboard.pooled .keyboard-key.dimmed{background:transparent;border-color:#d8d8d8;color:silver;cursor:default}.keyboard.pooled .keyboard-key.dimmed:active{transform:none;background:transparent}.keyboard.pooled .keyboard-key.used{opacity:.3;pointer-events:none}.keyboard-popup{position:absolute;transform:translate(-50%,-100%);display:flex;gap:clamp(4px,.8vw,6px);padding:clamp(5px,1vw,8px);background:#fff;border:3px solid #7088b8;border-radius:12px;box-shadow:0 8px 20px #0003;z-index:50}.keyboard-popup:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);border:10px solid transparent;border-top-color:#7088b8;border-bottom:0}.keyboard-popup-key{width:clamp(38px,8vw,54px);height:clamp(46px,10vw,64px);background:#e8eef8;border:2px solid #7088b8;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:clamp(18px,4vw,26px);font-weight:600;color:#236;cursor:pointer}.keyboard-popup-key:active{background:#d8e4f4;transform:scale(.95);border-color:#4068a8}.textfield-wrap{display:flex;align-items:center;gap:clamp(8px,1.5vw,12px);width:100%;max-width:720px}.textfield{flex:1;min-height:clamp(56px,12vw,84px);padding:clamp(10px,2vw,16px) clamp(12px,2.5vw,20px);font-family:inherit;font-size:clamp(28px,7vw,52px);font-weight:700;color:#236;border:4px solid #7088b8;border-radius:16px;background:#fff;word-break:break-all;overflow:hidden;line-height:1.2;display:flex;align-items:center}.textfield:empty:before{content:"pisz…";color:#bbb;font-weight:400}.textfield-speak{width:clamp(50px,10vw,74px);height:clamp(56px,12vw,84px);border:3px solid #4a8a4a;border-radius:16px;background:#e8f5e8;font-size:clamp(24px,5vw,36px);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}.textfield-speak:active{background:#d0e8d0}.controls{display:flex;gap:clamp(8px,2vw,16px);flex-wrap:wrap;justify-content:center}.controls button{font-family:inherit;font-size:clamp(16px,3vw,22px);font-weight:600;padding:clamp(10px,2vw,16px) clamp(16px,3vw,28px);border:3px solid #888;border-radius:14px;background:#fff;color:#333;cursor:pointer;transition:all .15s;min-height:clamp(44px,8vw,60px)}.controls button:hover{background:#f0f0e8;transform:translateY(-2px)}.controls button:active{transform:translateY(0)}.controls button.primary{background:#6aa86a;border-color:#4a8a4a;color:#fff}.controls button.primary:hover{background:#5a985a}