:root{--g:#4caf50;--y:#e0b628;--x:#787c7e;--bg:#fafafa;--fg:#1a1a1a;--b:#d3d6da}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:var(--bg);color:var(--fg);display:flex;flex-direction:column;align-items:center;min-height:100vh}
header{width:100%;max-width:560px;display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--b)}
h1{margin:0;font-size:1.6rem;letter-spacing:1px}h1 span{color:var(--g)}
header button{width:36px;height:36px;border-radius:50%;border:1px solid var(--b);background:#fff;font-size:1.1rem;cursor:pointer}
#sub{font-size:.85rem;color:#666;margin:6px 0}
#boards{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:min(560px,calc((100dvh - 290px)/1.85));padding:0 8px}
.board{display:grid;grid-template-rows:repeat(9,1fr);gap:3px;padding:6px;border-radius:8px;background:#fff;border:2px solid transparent;position:relative}
.board.solved{border-color:var(--g)}.board .lbl{position:absolute;top:-9px;left:8px;font-size:.65rem;background:var(--bg);padding:0 4px;color:#888}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:clamp(.7rem,3.2vw,1.1rem);border:1.5px solid var(--b);border-radius:3px;text-transform:uppercase}
.tile.g{background:var(--g);border-color:var(--g);color:#fff}.tile.y{background:var(--y);border-color:var(--y);color:#fff}.tile.x{background:var(--x);border-color:var(--x);color:#fff}
.tile.typed{border-color:#888}.tile.hint{color:var(--g);border-color:var(--g);border-style:dashed}
#keyboard{width:100%;max-width:560px;padding:8px 4px 14px;margin-top:auto}
.krow{display:flex;justify-content:center;gap:4px;margin:4px 0}
.key{flex:1;max-width:46px;height:52px;border:none;border-radius:5px;font-weight:700;font-size:.95rem;cursor:pointer;position:relative;overflow:hidden;display:grid;grid-template:1fr 1fr/1fr 1fr;padding:0;background:#d3d6da}
.key.wide{max-width:70px;flex:1.5;display:flex;align-items:center;justify-content:center;font-size:.75rem}
.key i{display:block}.key b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#111;text-shadow:0 0 3px #fff}
.key i.g{background:var(--g)}.key i.y{background:var(--y)}.key i.x{background:#a5a8aa}
#toast{position:fixed;top:70px;background:#222;color:#fff;padding:8px 14px;border-radius:6px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}#toast.show{opacity:1}
#endPanel{width:100%;max-width:560px;padding:10px;text-align:center}
#endPanel input{padding:8px;font-size:1rem;border:1px solid var(--b);border-radius:6px;width:60%}
button.btn{padding:8px 14px;border:none;border-radius:6px;background:var(--g);color:#fff;font-weight:700;cursor:pointer;margin:4px}
.hidden{display:none!important}
#modal{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:10}
.card{background:#fff;border-radius:10px;padding:18px;max-width:420px;width:92%;max-height:85vh;overflow:auto;position:relative}
.close{position:absolute;right:10px;top:6px;border:none;background:none;font-size:1.5rem;cursor:pointer}
.stats{display:flex;justify-content:space-around;text-align:center}.stats div b{display:block;font-size:1.5rem}
.bar{display:flex;align-items:center;gap:6px;margin:2px 0;font-size:.8rem}.bar span{background:var(--x);color:#fff;padding:1px 6px;min-width:20px;text-align:right}
pre.share{background:#f2f2f2;padding:8px;border-radius:6px}
@media(max-width:400px){.key{height:46px}#boards{gap:6px}.board{padding:4px;gap:2px}.row{gap:2px}}

#fbBtn{position:fixed;right:10px;bottom:calc(env(safe-area-inset-bottom) + 200px);z-index:8;border:none;border-radius:20px;padding:8px 12px;background:#333;color:#fff;font-weight:700;box-shadow:0 2px 6px #0004;cursor:pointer;opacity:.9}
@media(min-width:760px){#fbBtn{bottom:16px}}
#reportBar{font-size:.85rem;background:#fff3cd;border:1px solid #e0b628;border-radius:6px;padding:4px 8px;margin-bottom:6px}
button.link{background:none;border:none;color:#1565c0;text-decoration:underline;cursor:pointer;font-size:.85rem}
.muted{color:#666;font-size:.85rem}
.fb{text-align:left;border-top:1px solid var(--b);margin-top:12px;padding-top:6px}
.wrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px;padding:6px;border-radius:6px;margin:4px 0}
.wrow.iffy{background:#fff8e1}.flag{font-size:.75rem;color:#b26a00;font-weight:700}
.seg{display:flex;gap:4px;flex-wrap:wrap}.seg button{border:1px solid var(--b);background:#fff;border-radius:14px;padding:4px 9px;font-size:.78rem;cursor:pointer}
.seg button.on{background:var(--g);border-color:var(--g);color:#fff}
.stars button{font-size:1.2rem;padding:2px 8px}.stars button.on{background:var(--y);border-color:var(--y)}
.fb textarea,.fb input,.card textarea,.card input{width:100%;margin:6px 0;padding:8px;font:inherit;border:1px solid var(--b);border-radius:6px}
#endPanel input#themeIn{width:60%}
#endPanel .fb input{width:100%}