#kelimefi-app {
max-width: 420px;
margin: 30px auto;
text-align: center;
font-family: system-ui, -apple-system, BlinkMacSystemFont;
}
.kelimefi-board {
display: grid;
grid-auto-rows: 1fr;
gap: 6px;
margin: 20px 0;
}
.kelimefi-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.kelimefi-cell {
width: 64px;
height: 64px;
border: 2px solid #d3d6da;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: bold;
text-transform: uppercase;
background: #fff;
}
.kelimefi-keyboard {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
margin-top: 20px;
}
.kelimefi-key {
padding: 10px 12px;
background: #d3d6da;
border-radius: 4px;
cursor: pointer;
user-select: none;
font-weight: 600;
}
.kelimefi-key.wide {
padding: 10px 18px;
}
.kelimefi-cell.correct { background:#6aaa64 !important; border-color:#6aaa64 !important; color:#fff !important; }
.kelimefi-cell.present { background:#c9b458 !important; border-color:#c9b458 !important; color:#fff !important; }
.kelimefi-cell.absent  { background:#787c7e !important; border-color:#787c7e !important; color:#fff !important; }
.kelimefi-key.correct { background:#6aaa64 !important; color:#fff; }
.kelimefi-key.present { background:#c9b458 !important; color:#fff; }
.kelimefi-key.absent  { background:#787c7e !important; color:#fff; }
.kelimefi-status { margin-top: 12px; min-height: 20px; font-weight: 600; }
.kelimefi-key-row {
display: flex;
gap: 6px;
justify-content: center;
width: 100%;
}
.kelimefi-key {
min-width: 38px;
height: 46px;
border: none;
border-radius: 4px;
background: #d3d6da;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.kelimefi-key.wide {
min-width: 64px;
}
.kelimefi-key-row{
display:flex;
gap:6px;
width:100%;
justify-content:center;
margin-bottom:6px;
}
.kelimefi-key{
border:0;
outline:none;
} .kelimefi-key.correct { background:#6aaa64; color:#fff; }
.kelimefi-key.present { background:#c9b458; color:#fff; }
.kelimefi-key.absent  { background:#787c7e; color:#fff; }  .kelimefi-app .kelimefi-board { 
margin: 12px 0 !important;
gap: 6px !important;
}
.kelimefi-app .kelimefi-row {
gap: 6px !important;
} .kelimefi-app .kelimefi-cell{
width: auto !important; height: auto !important; aspect-ratio: 1 / 1 !important; border-radius: 6px !important; font-size: clamp(18px, 4.5vw, 28px) !important;
} .kelimefi-app{
max-width: 520px !important;
padding: 0 12px !important;
} .kelimefi-app .kelimefi-keyboard{
display: block !important; margin-top: 12px !important;
} .kelimefi-app .kelimefi-key-row{
display:flex !important;
justify-content:center !important;
gap: 6px !important;
width: 100% !important;
margin-bottom: 6px !important;
flex-wrap: nowrap !important;
} .kelimefi-app .kelimefi-key{
min-width: 32px !important; height: 44px !important;
padding: 0 10px !important;
border-radius: 8px !important;
font-size: clamp(12px, 3.2vw, 14px) !important;
} .kelimefi-app .kelimefi-key.wide{
min-width: 70px !important;
} @media (max-width: 420px){
.kelimefi-app{ max-width: 100% !important; }
.kelimefi-app .kelimefi-board,
.kelimefi-app .kelimefi-row{ gap: 5px !important; }
.kelimefi-app .kelimefi-key-row{ gap: 5px !important; }
.kelimefi-app .kelimefi-key{ min-width: 28px !important; height: 42px !important; }
.kelimefi-app .kelimefi-key.wide{ min-width: 62px !important; }
}  .kelimefi-app .kelimefi-board{
display:flex !important;
flex-direction:column !important;
gap:6px !important;
margin: 12px 0 !important;
align-items:center !important;
} .kelimefi-app .kelimefi-row{
display:flex !important;
gap:6px !important;
justify-content:center !important;
width:100% !important;
} .kelimefi-app .kelimefi-cell{
width: clamp(46px, 12vw, 64px) !important;
height: clamp(46px, 12vw, 64px) !important;
font-size: clamp(18px, 4.5vw, 28px) !important;
border-radius: 6px !important;
box-sizing: border-box !important;
} .kelimefi-app .kelimefi-keyboard{ display:block !important; }
.kelimefi-app .kelimefi-key-row{
display:flex !important;
justify-content:center !important;
gap:6px !important;
margin-bottom:6px !important;
} @media (max-width: 420px){
.kelimefi-app .kelimefi-row{ gap:5px !important; }
.kelimefi-app .kelimefi-board{ gap:5px !important; }
}
.kelimefi-app .kelimefi-topbar,
#kelimefi-app .kelimefi-topbar{
margin: 6px 0 14px;
display:flex;
justify-content:center;
gap:10px;
}
.kelimefi-app .kelimefi-newgame,
#kelimefi-app .kelimefi-newgame{
border:0;
cursor:pointer;
padding:10px 14px;
border-radius:10px;
font-weight:700;
background:#1e88e5;
color:#fff;
}
.kelimefi-app .kelimefi-newgame:hover,
#kelimefi-app .kelimefi-newgame:hover{
filter: brightness(0.95);
}
.kelimefi-actions{
display:flex;
justify-content:center;
margin: 10px 0 14px;
}
.kelimefi-newgame{
background:#1677ff;
color:#fff;
border:0;
border-radius:10px;
padding:10px 16px;
font-weight:700;
cursor:pointer;
}
.kelimefi-newgame:hover{
filter: brightness(0.95);
} .kelimefi-winners-wrap{max-width:520px;margin:12px auto 0 auto;}
.kelimefi-winners{border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;background:#fff;}
.kelimefi-winners-title{margin:0 0 8px 0;font-size:16px;font-weight:700;text-align:center;}
.kelimefi-winners-list{margin:0;padding-left:18px;}
.kelimefi-winner-item{display:flex;justify-content:space-between;gap:12px;padding:4px 0;}
.kelimefi-winner-name{font-weight:600;}
.kelimefi-winner-meta{opacity:.75;font-size:13px;white-space:nowrap;}
.kelimefi-winners-empty{text-align:center;opacity:.75;padding:6px 0;}
.kelimefi-login-required{text-align:center;margin:10px auto;max-width:520px;padding:10px;border:1px dashed #cbd5e1;border-radius:12px;}
.kelimefi-definition{margin-top:12px;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fafafa;font-size:14px;line-height:1.5;white-space:pre-line;}
.kelimefi-definition strong{display:block;margin-bottom:6px;}
@media (max-width: 480px){
.kelimefi-key-row{ gap:4px; }
.kelimefi-key{ height:58px; font-size:16px; }
} @media (max-width: 480px){ #kelimefi-app .kelimefi-key-row,
.kelimefi-app .kelimefi-key-row{
gap: 3px !important; } #kelimefi-app .kelimefi-key-row:nth-child(2),
.kelimefi-app .kelimefi-key-row:nth-child(2){
gap: 2px !important; } #kelimefi-app .kelimefi-key,
.kelimefi-app .kelimefi-key{
padding: 0 !important;
}
}
.kelimefi-event-stats{
margin:10px 0 6px;
font-weight:700;
opacity:.9;
}