/* =============================================
   Word Search Generator — Frontend Styles v1.3
   ============================================= */

.wsg-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 860px;
    margin: 24px auto;
    padding: 24px;
    background: var(--wsg-bg, #ffffff);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
    box-sizing: border-box;
}

/* ── Header ── */
.wsg-header-row { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:20px; }
.wsg-logo       { height:48px; width:auto; object-fit:contain; flex-shrink:0; }
.wsg-title      { margin:0; font-size:1.6rem; color:var(--wsg-word,#222); text-align:center; }

/* ── Timer ── */
.wsg-timer-bar {
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-bottom:14px; background:#f0f4f8; border-radius:8px;
    padding:8px 20px; font-size:1.05rem; font-weight:700;
    color:#444; border:2px solid #d0d7e0;
}
.wsg-timer-display { font-family:'Courier New',monospace; font-size:1.2rem; letter-spacing:.05em; }
.wsg-timer-warning { color:#e74c3c !important; animation:wsgBlink .6s steps(1) infinite; }
@keyframes wsgBlink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ════════════���═══════════════════════════
   LAYOUT
   ════════════════════════════════════════ */
.wsg-layout { display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }

/* Board default */
.wsg-board-wrap { flex:0 0 auto; position:relative; }

/* No-wordlist: centre the board */
.wsg-no-wordlist .wsg-layout    { justify-content:center; align-items:center; }
.wsg-no-wordlist .wsg-board-wrap{ flex:0 0 auto; margin:0 auto; }

/* ── Grid ── */
.wsg-grid {
    border-collapse:collapse; display:block;
    user-select:none; -webkit-user-select:none; margin:0 auto;
}
.wsg-grid td {
    width:  calc(var(--wsg-fs,18px) * 2.4);
    height: calc(var(--wsg-fs,18px) * 2.4);
    text-align:center; vertical-align:middle;
    border:1px solid var(--wsg-grid,#cccccc);
    background:var(--wsg-bg,#ffffff);
    color:var(--wsg-word,#222222);
    font-size:var(--wsg-fs,18px);
    font-weight:700; font-family:'Courier New',monospace;
    border-radius:3px; transition:background .15s;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
}
.wsg-grid td.wsg-selected   { background:rgba(74,144,217,.4) !important; }
.wsg-grid td.wsg-found-cell { background:var(--wsg-found,#90ee90) !important; animation:wsgPop .3s ease; }
@keyframes wsgPop { 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }

.wsg-overlay {
    position:absolute; top:0; left:0;
    cursor:crosshair; background:transparent;
    touch-action:none; -ms-touch-action:none; z-index:10;
}

/* ── Word panel ── */
.wsg-words-panel { flex:1 1 140px; min-width:130px; }
.wsg-wordlist    { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:6px; }
.wsg-wordlist li {
    background:#f0f4f8; padding:7px 14px; border-radius:20px;
    font-weight:700; font-size:.92rem; letter-spacing:.04em; transition:all .3s; color:#333;
}
.wsg-wordlist li.wsg-word-found { background:var(--wsg-found,#90ee90); color:#1a5e2a; text-decoration:line-through; opacity:.75; }

/* ── Buttons ── */
.wsg-btn { padding:9px 18px; border:none; border-radius:8px; cursor:pointer; font-size:.9rem; font-weight:600; transition:background .2s,transform .1s; }
.wsg-reset  { background:#e74c3c; color:#fff; width:100%; margin-bottom:8px; }
.wsg-reset:hover  { background:#c0392b; }
.wsg-reset:active { transform:scale(.97); }

/* ── Actions ── */
.wsg-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:20px; }

.wsg-fullscreen-btn {
    background:#f0f4f8; color:#444; border:2px solid #d0d7e0;
    border-radius:8px; padding:9px 22px; font-size:.9rem; font-weight:600;
    cursor:pointer; display:inline-flex; align-items:center; gap:6px;
    transition:background .2s,border-color .2s,transform .15s;
}
.wsg-fullscreen-btn:hover { background:#e0e8f4; border-color:#4a90d9; color:#1a5aaa; transform:scale(1.04); }

.wsg-pdf-btn { background:#e74c3c; color:#fff; border:none; padding:9px 22px; border-radius:8px; font-size:.9rem; font-weight:600; cursor:pointer; transition:background .2s,transform .1s; }
.wsg-pdf-btn:hover  { background:#c0392b; }
.wsg-pdf-btn:active { transform:scale(.97); }

/* ── Embed ── */
.wsg-embed-section { margin-top:18px; text-align:center; }
.wsg-embed-toggle  { background:#f0f4f8; color:#444; border:2px solid #d0d7e0; padding:8px 20px; border-radius:8px; font-size:.9rem; font-weight:600; cursor:pointer; transition:background .2s; }
.wsg-embed-toggle:hover { background:#e0e8f4; border-color:#4a90d9; color:#1a5aaa; }
.wsg-embed-box   { margin-top:14px; background:#f7f9fc; border:1px solid #d0d7e0; border-left:4px solid #4a90d9; border-radius:8px; padding:16px; text-align:left; }
.wsg-embed-note  { font-size:.87rem; color:#666; margin:0 0 10px; }
.wsg-embed-label { font-size:.88rem; color:#444; margin:0 0 6px; }
.wsg-embed-row   { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; background:#fff; border:1px solid #e0e0e0; border-radius:6px; padding:10px; }
.wsg-embed-row code { flex:1; font-size:.78rem; color:#c0392b; word-break:break-all; white-space:pre-wrap; line-height:1.6; background:transparent; font-family:'Courier New',monospace; }
.wsg-embed-copy  { background:#4a90d9; color:#fff; border:none; border-radius:6px; padding:7px 14px; cursor:pointer; font-size:.85rem; white-space:nowrap; transition:background .2s; align-self:flex-start; flex-shrink:0; }
.wsg-embed-copy:hover { background:#357ab8; }

/* ── Success ── */
.wsg-success {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.93); border-radius:8px;
    font-size:1.2rem; font-weight:700; color:#27ae60;
    text-align:center; padding:20px; animation:wsgFadeIn .5s ease; z-index:20;
}
.wsg-success.wsg-timeout { color:#e74c3c; }
.wsg-success-inner { display:flex; flex-direction:column; align-items:center; gap:16px; }
.wsg-success-inner p { margin:0; }
@keyframes wsgFadeIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }

/* ── Social ── */
.wsg-social-btns { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:380px; }
.wsg-social-btn  { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:22px; font-size:.82rem; font-weight:700; text-decoration:none; color:#fff; transition:opacity .2s,transform .1s; white-space:nowrap; }
.wsg-social-btn:hover { opacity:.85; transform:scale(1.05); color:#fff; }
.wsg-twitter   { background:#000; }
.wsg-facebook  { background:#1877f2; }
.wsg-whatsapp  { background:#25d366; }
.wsg-telegram  { background:#2ca5e0; }
.wsg-linkedin  { background:#0a66c2; }
.wsg-pinterest { background:#e60023; }
.wsg-email     { background:#555; }

/* ════════════════════════════════════════
   FULLSCREEN
   --wsg-cell-fs is set by JS to the pixel
   size of ONE cell (width = height).
   Font-size inside is 42% of cell size.
   ════════════════════════════════════════ */
.wsg-container:fullscreen,
.wsg-container:-webkit-full-screen,
.wsg-container:-moz-full-screen,
.wsg-container.wsg-is-fullscreen {
    max-width:100vw !important;
    width:100vw !important;
    height:100dvh !important;
    margin:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:16px 24px !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    box-sizing:border-box !important;
}
.wsg-container.wsg-is-fullscreen {
    position:fixed !important; inset:0 !important; z-index:999999 !important;
}

.wsg-container:fullscreen .wsg-layout,
.wsg-container:-webkit-full-screen .wsg-layout,
.wsg-container.wsg-is-fullscreen .wsg-layout {
    justify-content:center; flex:1; align-items:center;
    /* prevent the layout from pushing out of the container */
    overflow:hidden;
}

/*
 * --wsg-cell-fs  = full cell size (width & height) in px — set by JS
 * Font-size      = 42% of cell size (looks good across all grid densities)
 */
.wsg-container:fullscreen .wsg-grid td,
.wsg-container:-webkit-full-screen .wsg-grid td,
.wsg-container.wsg-is-fullscreen .wsg-grid td {
    width:  var(--wsg-cell-fs, 36px) !important;
    height: var(--wsg-cell-fs, 36px) !important;
    font-size: calc(var(--wsg-cell-fs, 36px) * 0.42) !important;
}

/* ── Responsive ── */
@media (max-width:560px) {
    .wsg-container  { padding:12px; }
    .wsg-layout     { flex-direction:column; gap:16px; }
    .wsg-words-panel{ width:100%; }
    .wsg-wordlist   { flex-direction:row; flex-wrap:wrap; }
    .wsg-grid td    { width:calc(var(--wsg-fs,18px)*2.8) !important; height:calc(var(--wsg-fs,18px)*2.8) !important; }
    .wsg-actions    { gap:8px; }
    .wsg-pdf-btn, .wsg-fullscreen-btn { flex:1 1 auto; justify-content:center; }
    .wsg-social-btn { padding:6px 10px; font-size:.78rem; }
}