:root{--r:#e74c3c;--bg:#0c0e12;--p:#14171d}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{height:100%;overflow:hidden;background:var(--bg);color:#e8eaed;font-family:system-ui,"Segoe UI",sans-serif;touch-action:manipulation}
body{display:flex;align-items:center;justify-content:center;padding:8px}
.app{position:relative;width:100%;max-width:min(620px,100%);height:min(100%,820px);display:flex;flex-direction:column;gap:8px;background:var(--p);border:2px solid var(--r);border-radius:14px;padding:12px;box-shadow:0 0 36px #e74c3c44;overflow:hidden}
header{display:flex;justify-content:space-between;align-items:center;font-size:clamp(10px,2.8vw,13px)}header b,.hud b{color:#ffd166}
h1{font-size:clamp(14px,4.4vw,21px);letter-spacing:3px;text-align:center}
.hud{display:flex;justify-content:space-between;font-size:clamp(11px,3.2vw,14px);gap:6px}#info{color:#7be39b;text-align:center;flex:1}
.bar{height:8px;border-radius:6px;background:#0a0c10;border:1px solid #262c36;overflow:hidden}.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#e74c3c,#f1c40f 60%,#3ba55d);transition:width .2s linear}
.board{flex:1;min-height:0;display:grid;gap:clamp(4px,1.4vw,10px);perspective:900px;align-content:center}
.card{position:relative;border:0;padding:0;background:none;cursor:pointer;transform-style:preserve-3d;transition:transform .35s;min-height:0;min-width:0}
.card.up,.card.done{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:12px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid #2a303b}
.back{background:radial-gradient(circle at 50% 35%,#2a1215,#14171d 70%)}.back img{width:60%;max-height:60%;object-fit:contain;filter:invert(1) drop-shadow(0 0 8px #e74c3c88);opacity:.85}
.front{transform:rotateY(180deg);background:#1d2230;font-size:clamp(22px,min(9vw,6.5vh),56px)}
.card.done .front{background:#173323;border-color:#2e6b42}.card.cursed .front{background:#3a1214;border-color:#a33}
.card.shake{animation:sh .3s}@keyframes sh{25%{margin-left:-6px}75%{margin-left:6px}}
.card.sw{animation:sw .45s}@keyframes sw{50%{transform:scale(.6) rotate(8deg);opacity:.4}}
.scr{position:absolute;inset:0;background:#0c0e12f2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;overflow:auto;z-index:5}
.scr h2{letter-spacing:3px;font-size:clamp(18px,6vw,26px)}.scr p{font-size:clamp(12px,3.6vw,15px);line-height:1.6;max-width:360px}.sm{opacity:.8;font-size:12px!important}small{opacity:.85}
.lg{width:100px;filter:invert(1) drop-shadow(0 0 14px #e74c3c)}.hid{display:none!important}
button.b,.scr button{font:inherit;font-weight:700;background:var(--r);color:#fff;border:0;border-radius:10px;padding:12px 24px;min-width:200px;cursor:pointer;font-size:16px}
.scr button.gh{background:transparent;border:2px solid var(--r);color:var(--r)}
input{font:inherit;text-align:center;padding:10px;border-radius:10px;border:2px solid var(--r);background:#0c0e12;color:#fff;width:230px;user-select:text;-webkit-user-select:text}
.opts{display:grid;gap:10px;width:100%;max-width:320px}.opts button{min-width:0!important;padding:12px 8px!important;font-size:14px!important}