/* Party & Co Junior Board - Game CSS v3.3.0 */

.pcjb-game {
    position: relative;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #0f1923;
    min-height: 100vh;
    overflow: hidden;
    color: #fff;
}

.pcjb-screen {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 20px; box-sizing: border-box;
}

/* ============================================================ SETUP */
.pcjb-setup-box {
    background: linear-gradient(135deg,#1a2a3a 0%,#0f1923 100%);
    border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
    padding: 48px 52px; width: 100%; max-width: 600px;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.pcjb-logo-line { font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#FFB800;margin-bottom:6px; }
.pcjb-setup-title { font-size:32px;font-weight:900;margin:0 0 32px;color:#fff;letter-spacing:-1px; }
.pcjb-setup-section { margin-bottom:28px; }
.pcjb-setup-label { font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px; }
.pcjb-num-selector { display:flex;gap:10px; }
.pcjb-num-btn {
    width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.2);
    background:transparent;color:rgba(255,255,255,.5);font-size:18px;font-weight:900;
    cursor:pointer;transition:all .2s;
}
.pcjb-num-btn:hover,.pcjb-num-btn.active { border-color:#FFB800;color:#FFB800;background:rgba(255,184,0,.1);transform:scale(1.08); }

.pcjb-player-inputs { display:flex;flex-direction:column;gap:14px;margin-bottom:28px; }

.pcjb-player-input-row {
    display:flex;flex-direction:column;gap:8px;
    border-left:3px solid #ccc;padding-left:12px;
}
.pcjb-player-row-top { display:flex;align-items:center;gap:10px; }
.pcjb-player-dot {
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:900;color:#fff;flex-shrink:0;
}
.pcjb-name-input {
    flex:1;background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.18);border-radius:8px;
    padding:10px 14px;color:#fff !important;font-size:15px;font-weight:700;
    outline:none;transition:border .2s;
}
.pcjb-name-input:focus { border-color:#FFB800; }
.pcjb-name-input::placeholder { color:rgba(255,255,255,.3);font-weight:400; }

/* Avatar picker */
.pcjb-avatar-picker {
    display:flex;flex-wrap:wrap;gap:6px;padding-top:4px;
}
.pcjb-avatar-opt {
    width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.05);padding:0;cursor:pointer;
    overflow:hidden;transition:border-color .15s,transform .15s;
}
.pcjb-avatar-opt img { width:100%;height:100%;object-fit:cover;display:block;border-radius:50%; }
.pcjb-avatar-opt.selected { border-color:#FFB800;transform:scale(1.12);box-shadow:0 0 0 2px #FFB800; }
.pcjb-avatar-opt:hover { border-color:rgba(255,255,255,.6); }

.pcjb-start-btn {
    width:100%;padding:16px;
    background:linear-gradient(135deg,#FFB800,#FF8800);
    border:none;border-radius:12px;color:#fff;font-size:17px;font-weight:900;
    letter-spacing:.5px;cursor:pointer;
    box-shadow:0 4px 20px rgba(255,140,0,.35);
    transition:transform .15s,box-shadow .15s;
}
.pcjb-start-btn:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,140,0,.5); }

/* ============================================================ BOARD */
.pcjb-board-layout {
    display:flex;align-items:center;gap:20px;
    width:100%;padding:8px 16px 16px;box-sizing:border-box;
    flex:1;
}
.pcjb-svg-wrap { flex:1;min-width:0;display:flex;align-items:center;justify-content:center; }
.pcjb-svg { width:100%;height:auto;border-radius:16px;box-shadow:0 12px 60px rgba(0,0,0,.5); }

/* Side panel */
.pcjb-side-panel {
    width:220px;flex-shrink:0;display:flex;flex-direction:column;gap:12px;
}
.pcjb-panel-title { font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.4); }
.pcjb-players-panel { display:flex;flex-direction:column;gap:6px; }

.pcjb-player-card {
    display:flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.05);border-radius:10px;
    padding:8px 10px;border:2px solid transparent;transition:all .2s;
}
.pcjb-player-card.pcjb-current { border-color:currentColor;background:rgba(255,255,255,.1); }
.pcjb-pcard-dot {
    width:32px;height:32px;border-radius:50%;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:900;color:#fff;flex-shrink:0;
}
.pcjb-pcard-dot img { width:100%;height:100%;object-fit:cover;display:block; }
.pcjb-pcard-name { font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px; }
.pcjb-pcard-pos  { font-size:11px;color:rgba(255,255,255,.45);margin-top:1px; }

/* Dice section */
.pcjb-dice-section {
    background:rgba(255,255,255,.05);border-radius:14px;padding:14px;
    display:flex;flex-direction:column;align-items:center;gap:10px;
    border:1px solid rgba(255,255,255,.08);
}
.pcjb-status-text { font-size:13px;font-weight:700;text-align:center;min-height:18px;color:#FFB800; }
.pcjb-dice-face {
    font-size:60px;line-height:1;user-select:none;cursor:default;
    min-height:68px;display:flex;align-items:center;justify-content:center;
}
.pcjb-dice-face.pcjb-rolling { animation:pcjb-spin 0.08s linear infinite; }
.pcjb-dice-face.pcjb-pop     { animation:pcjb-pop 0.4s ease; }
.pcjb-dice-logo-img { width:72px;height:72px;object-fit:contain;display:block;margin:0 auto; }
.pcjb-dice-face img { width:72px;height:72px;object-fit:contain;display:block;margin:0 auto; }

@keyframes pcjb-spin { 0%{transform:rotate(0)scale(1)}25%{transform:rotate(15deg)scale(1.1)}75%{transform:rotate(-15deg)scale(1.1)}100%{transform:rotate(0)scale(1)} }
@keyframes pcjb-pop  { 0%{transform:scale(1)}40%{transform:scale(1.5)}70%{transform:scale(.9)}100%{transform:scale(1)} }

.pcjb-roll-btn {
    width:100%;padding:11px 8px;
    background:linear-gradient(135deg,#29C6E8,#1a8fa8);
    border:none;border-radius:10px;color:#fff;font-size:14px;font-weight:800;
    cursor:pointer;box-shadow:0 4px 14px rgba(41,198,232,.3);
    transition:transform .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center;gap:6px;
}
.pcjb-roll-btn:hover:not(:disabled) { transform:translateY(-2px);box-shadow:0 6px 20px rgba(41,198,232,.45); }
.pcjb-roll-btn:disabled { opacity:.4;cursor:default;transform:none; }
.pcjb-roll-btn-icon { width:20px;height:20px;object-fit:contain; }
.pcjb-new-game-btn {
    width:100%;padding:9px 8px;background:transparent;
    border:1px solid rgba(255,255,255,.2);border-radius:10px;
    color:rgba(255,255,255,.4);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;
}
.pcjb-new-game-btn:hover { border-color:rgba(255,255,255,.5);color:rgba(255,255,255,.7); }

/* ============================================================ PIECES */
.pcjb-piece-group { pointer-events:none; }

/* ============================================================ OVERLAY (dimmer) */
.pcjb-overlay {
    position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.7);
    display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(4px);animation:pcjb-fadein .2s ease;
}
@keyframes pcjb-fadein { from{opacity:0} to{opacity:1} }

/* ============================================================ CARD PANEL (WHITE) */
.pcjb-card-panel {
    background:#ffffff;border-radius:20px;
    width:100%;max-width:500px;position:relative;
    box-shadow:0 20px 80px rgba(0,0,0,.8);overflow:hidden;
    animation:pcjb-slideup .25s ease;
}
@keyframes pcjb-slideup { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }

.pcjb-co-header {
    display:flex;align-items:center;gap:14px;padding:16px 22px;
    background:#29C6E8;
}
.pcjb-co-img {
    width:48px;height:48px;border-radius:10px;background:rgba(255,255,255,.25);
    overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;
}
.pcjb-co-img img { width:100%;height:100%;object-fit:cover; }
.pcjb-co-cat-name { font-size:20px;font-weight:900;color:#fff;letter-spacing:-.5px; }

.pcjb-co-body { padding:20px 22px;color:#1a2535; }
.pcjb-co-player-line { font-size:13px;color:#666;margin-bottom:12px; }
.pcjb-co-player-line strong { color:#1a2535; }

/* Timer inside card */
.pcjb-co-timer-wrap {
    display:flex;align-items:center;justify-content:center;
    gap:12px;margin-bottom:14px;
}
.pcjb-co-timer-svg { width:80px;height:80px; }
.pcjb-co-timer-bg  { fill:none;stroke:#e8e8e8;stroke-width:8; }
.pcjb-co-timer-fg  {
    fill:none;stroke:#29C6E8;stroke-width:8;stroke-linecap:round;
    stroke-dasharray:339.292;stroke-dashoffset:0;
    transition:stroke-dashoffset .9s linear,stroke .3s;
}
.pcjb-co-timer-text { font-size:24px;font-weight:900;fill:#1a2535;font-family:'Segoe UI',Arial,sans-serif; }
.pcjb-co-timer-text.pcjb-red { fill:#e53e3e; }
.pcjb-co-timer-fg.pcjb-red   { stroke:#e53e3e; }

.pcjb-co-pause-btn {
    width:36px;height:36px;border-radius:50%;border:none;
    background:rgba(0,0,0,.08);color:#1a2535;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s;flex-shrink:0;
}
.pcjb-co-pause-btn svg { width:16px;height:16px; }
.pcjb-co-pause-btn:hover { background:rgba(0,0,0,.15); }

.pcjb-co-text {
    font-size:20px;font-weight:700;line-height:1.5;color:#1a2535;
    margin-bottom:16px;min-height:52px;
}
.pcjb-co-answer {
    background:#f8f9fa;border-left:4px solid #FFB800;
    border-radius:4px;padding:10px 14px;
    font-size:16px;color:#333;font-weight:700;margin-bottom:16px;
}
.pcjb-co-actions { display:flex;gap:10px;justify-content:flex-end; }

.pcjb-btn { padding:10px 20px;border-radius:10px;font-size:14px;font-weight:700;border:none;cursor:pointer;transition:all .15s; }
.pcjb-btn-ans  { background:rgba(255,184,0,.12);color:#cc8800;border:1px solid rgba(255,184,0,.3); }
.pcjb-btn-ans:hover { background:rgba(255,184,0,.22); }
.pcjb-btn-next { background:linear-gradient(135deg,#44C44C,#2da02d);color:#fff;box-shadow:0 4px 14px rgba(68,196,68,.3); }
.pcjb-btn-next:hover { transform:translateY(-1px);box-shadow:0 6px 20px rgba(68,196,68,.45); }

/* Time up overlay (inside card panel) */
.pcjb-co-time-up {
    position:absolute;inset:0;background:rgba(255,255,255,.96);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    z-index:10;border-radius:20px;gap:8px;
    animation:pcjb-fadein .25s ease;
}
.pcjb-co-timeup-icon { width:100px;height:100px;filter:drop-shadow(0 4px 16px rgba(192,57,43,.5));animation:pcjb-pop .4s ease; }
.pcjb-co-timeup-text { font-size:26px;font-weight:900;color:#c0392b;letter-spacing:.5px; }

/* ============================================================ WILD */
.pcjb-wild-panel {
    background:#ffffff;border-radius:20px;padding:36px 32px;
    max-width:500px;width:100%;text-align:center;
    animation:pcjb-slideup .25s ease;box-shadow:0 20px 80px rgba(0,0,0,.7);
}
.pcjb-wild-title { font-size:24px;font-weight:900;color:#1a2535;margin:0 0 24px;letter-spacing:-.5px; }
.pcjb-wild-btn { border:3px solid; }
.pcjb-wild-btn-img { width:72px;height:72px;object-fit:contain;border-radius:8px;display:block;margin:0 auto 6px; }
.pcjb-wild-btn-name { font-size:13px;font-weight:900;color:#fff;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.5);display:block; }
.pcjb-wild-btn-name-only { font-size:15px; }
.pcjb-wild-cats { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.pcjb-wild-btn {
    padding:16px 12px;border-radius:12px;border:none;color:#fff;
    font-size:14px;font-weight:800;cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .15s,box-shadow .15s;
}
.pcjb-wild-btn:hover { transform:translateY(-3px) scale(1.03);box-shadow:0 8px 24px rgba(0,0,0,.4); }

/* ============================================================ WIN */
.pcjb-win-screen { background:radial-gradient(ellipse at center,#1a2a1a 0%,#0f1923 100%); }
.pcjb-win-box { text-align:center;padding:60px 40px;animation:pcjb-slideup .4s ease; }
.pcjb-win-trophy { font-size:100px;line-height:1;margin-bottom:20px;animation:pcjb-bounce 1s ease infinite alternate; }
@keyframes pcjb-bounce { from{transform:translateY(0)} to{transform:translateY(-16px)} }
.pcjb-win-title { font-size:56px;font-weight:900;color:#FFB800;letter-spacing:-2px;margin:0 0 16px;text-shadow:0 0 40px rgba(255,184,0,.5); }
.pcjb-win-msg { font-size:24px;color:rgba(255,255,255,.7);margin:0 0 40px; }
.pcjb-win-player-name { color:#fff;font-weight:900; }

/* ============================================================ MISC */
.pcjb-version-tag { position:fixed;bottom:10px;right:14px;font-size:11px;color:rgba(255,255,255,.2);pointer-events:none;z-index:10; }

.pcjb-avatar-opt.pcjb-avatar-taken { opacity:.25; cursor:not-allowed; filter:grayscale(1); }

/* v3.3.2 fixes */
.pcjb-avatar-opt.pcjb-avatar-taken {
    opacity:.2; cursor:not-allowed; filter:grayscale(1);
    pointer-events:none; transform:none !important;
}
.pcjb-player-dot { overflow:hidden; }
.pcjb-player-dot img { width:100%;height:100%;object-fit:cover;display:block;border-radius:50%; }

/* v3.3.3 fullscreen board */
.pcjb-game.pcjb-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9990 !important;
    overflow: hidden !important;
    width: 100vw !important;
    height: 100vh !important;
}
.pcjb-fullscreen .pcjb-board-layout {
    height: 100vh;
    padding: 10px 14px;
    align-items: center;
}
.pcjb-fullscreen .pcjb-svg-wrap {
    height: 100%;
    display: flex;
    align-items: center;
}
.pcjb-fullscreen .pcjb-svg {
    max-height: calc(100vh - 20px);
    width: auto;
    max-width: calc(100vw - 260px);
}

/* ?? v3.3.4 ?? */

/* v3.3.14: pause/play via CSS-only spans (ver abaixo) */

/* Card text: centered + larger */
.pcjb-co-text {
    font-size: 28px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    min-height: 60px !important;
}

/* Answer confirm overlay */
.pcjb-answer-confirm {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.97);
    border-radius: 20px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 24px; z-index: 20;
    animation: pcjb-fadein .2s ease;
    padding: 24px;
}
.pcjb-confirm-q {
    font-size: 22px; font-weight: 700;
    color: #1a2535; text-align: center;
}
.pcjb-confirm-btns { display: flex; gap: 16px; }
.pcjb-btn-back {
    background: linear-gradient(135deg,#e74c3c,#c0392b);
    color: #fff; box-shadow: 0 4px 14px rgba(231,76,60,.3);
}
.pcjb-btn-back:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(231,76,60,.45); }

/* v3.3.8: VER button */
.pcjb-co-pre-actions {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}
.pcjb-btn-ver {
    background: linear-gradient(135deg,#29C6E8,#1a8fa8);
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 3px;
    padding: 14px 0;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(41,198,232,.35);
    transition: transform .15s, box-shadow .15s;
}
.pcjb-btn-ver:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(41,198,232,.5); }

/* v3.3.14: pause/play - CSS-only icons (imunes ao tema WP) */
.pcjb-ico-pause { display:block; width:4px; height:14px; background:#333333; box-shadow:6px 0 0 #333333; flex-shrink:0; }
.pcjb-ico-play  { display:block; width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:12px solid #333333; margin-left:3px; flex-shrink:0; }

/* v3.3.14: ESCONDER button */
.pcjb-btn-esconder { background:rgba(0,0,0,.07); color:#555; border:1px solid rgba(0,0,0,.14); }
.pcjb-btn-esconder:hover { background:rgba(0,0,0,.12); }

/* v3.3.16: time-up overlay ? descricao e resposta */
.pcjb-co-time-up { overflow-y:auto; justify-content:flex-start; padding-top:24px; gap:10px; }
.pcjb-co-timeup-desc {
    font-size:18px; font-weight:700; color:#1a2535;
    text-align:center; line-height:1.4;
    margin:0 16px; max-width:400px;
}
.pcjb-co-timeup-ans {
    background:#f8f9fa; border-left:4px solid #FFB800;
    border-radius:4px; padding:10px 14px;
    font-size:15px; color:#333; font-weight:700;
    margin:0 16px; max-width:400px; width:calc(100% - 32px);
}

/* v3.3.18: logo */
.pcjb-setup-outer { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:40px; flex-wrap:nowrap; }
.pcjb-setup-logo-wrap { flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.pcjb-setup-logo-img { max-width:220px; max-height:220px; width:auto; height:auto; display:block; object-fit:contain; }

/* board screen is column so logo bar sits on top */
#pcjb-board-screen { flex-direction:column; align-items:stretch; padding:8px 16px; min-height:100vh; }
.pcjb-board-logo-bar { text-align:center; padding:6px 0 4px; flex-shrink:0; max-height:140px; overflow:hidden; width:100%; }
.pcjb-board-logo-img { height:120px !important; max-height:120px !important; width:auto !important; max-width:none !important; object-fit:contain; display:inline-block; }

.pcjb-fullscreen .pcjb-board-layout { height:calc(100vh - 56px); }