/* ===== Puzzle de pescuit (peste reminder + roua + items) ===== */
.pp-page { max-width: 1240px; }
.pp-page .sec { margin-top: 14px; }
.pp-page .h { font-size: 18px; }
.pp-not { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.pp-not b { color: var(--text); }
kbd { display: inline-block; min-width: 16px; padding: 1px 5px; border-radius: 5px; border: 1px solid rgba(255,255,255,.18); border-bottom-width: 2px; background: rgba(255,255,255,.05); font: 700 10.5px ui-monospace, Consolas, monospace; color: #cbd3e3; text-align: center; }
.pp-sp { flex: 1; }
.pp-rosu { color: var(--danger) !important; border-color: rgba(255,92,122,.4) !important; }
.pp-go { background: rgba(245,197,66,.16) !important; border-color: rgba(245,197,66,.6) !important; color: var(--gold) !important; }
.pp-go kbd { margin-left: 6px; color: var(--gold); border-color: rgba(245,197,66,.4); }

/* cap */
.pp-hero { display: flex; align-items: center; gap: 28px; margin: 12px 4px 6px; }
.pp-hero > div:first-child { flex: 1; }
.pp-hero h1 { margin: 6px 0 8px; font: 800 36px/1.1 Cinzel, serif; color: #f2e6c9; }
.pp-hero .lead { max-width: 720px; margin: 0; }
.pp-hero .lead b { color: #f2e6c9; }
.pp-hero .kicker { background: rgba(38,224,238,.12); border-color: rgba(38,224,238,.45); color: #7ef0f8; }
@media (max-width: 760px) { .pp-hero-art { display: none; } .pp-hero h1 { font-size: 30px; } }

.pp-grid { display: grid; gap: 0 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .pp-grid { grid-template-columns: minmax(0, 1fr) 340px; } .pp-lat { position: sticky; top: 10px; } }

/* sus: cufere + bara + șansă */
.pp-sus { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 14px; }
.pp-lbl { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pp-cntv { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.pp-cntv b { min-width: 32px; text-align: center; font: 800 26px/1 Cinzel, serif; color: #f2e6c9; }
.pp-mic { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; }
.pp-mic:hover { border-color: rgba(245,197,66,.5); color: var(--gold); }
.pp-bar { display: grid; grid-template-columns: repeat(26, 1fr); gap: 2px; }
.pp-bar i { height: 12px; border-radius: 3px; opacity: .28; }
.pp-bar i.zl { background: #f5c542; } .pp-bar i.zm { background: #9aa6c4; } .pp-bar i.zs { background: #b9733f; }
.pp-bar i.fol { opacity: 1; }
.pp-bar i.acum { opacity: .8; outline: 2px solid #fff; outline-offset: 1px; }
.pp-barl { display: flex; margin-top: 5px; font-size: 10.5px; font-weight: 700; }
.pp-barl span { all: unset; font-size: 10.5px; font-weight: 700; } .pp-barl .zl { width: calc(10 / 26 * 100%); color: #f5c542; } .pp-barl .zm { width: calc(14 / 26 * 100%); color: #9aa6c4; } .pp-barl .zs { color: #c98a4b; }
.pp-sansa { text-align: right; }
.pp-sansa b { display: block; margin-top: 4px; font: 800 26px/1 Cinzel, serif; color: var(--gold); }
.pp-sansa.zero b { color: var(--muted); }

.pp-gata[hidden] { display: none !important; }
.pp-gata { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border-radius: 18px; background: rgba(8,9,14,.82); backdrop-filter: blur(3px); text-align: center; animation: pp-in .3s ease; }
.pp-gata > div { display: grid; gap: 6px; justify-items: center; }
.pp-gata small { color: var(--muted); font-size: 12.5px; }
.pp-gata b { font: 800 30px Cinzel, serif; color: #f2e6c9; }
.pp-lada { padding: 6px 16px; border-radius: 999px; font-weight: 800; font-size: 15px; }
.pp-gata.zl .pp-lada { background: rgba(245,197,66,.18); color: var(--gold); border: 1px solid rgba(245,197,66,.6); }
.pp-gata.zm .pp-lada { background: rgba(154,166,196,.18); color: #cdd5ea; border: 1px solid rgba(154,166,196,.6); }
.pp-gata.zs .pp-lada { background: rgba(201,138,75,.18); color: #e7b07a; border: 1px solid rgba(201,138,75,.6); }
.pp-gata .m2b { margin-top: 8px; }
@keyframes pp-in { from { opacity: 0; } }

/* sfat */
.pp-sfat { max-width: 560px; margin: 14px auto 0; min-height: 70px; }
.pp-info { padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px dashed rgba(255,255,255,.12); font-size: 13.5px; line-height: 1.55; color: #cbd3e3; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pp-info b { color: var(--text); }
.pp-asteapta { display: flex; align-items: center; gap: 10px; padding: 14px; color: var(--muted); font-size: 13px; }
.pp-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--gold); animation: pp-rot .8s linear infinite; }
@keyframes pp-rot { to { transform: rotate(360deg); } }
.pp-dlxsfat { width: 100%; margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(214,60,255,.08); border: 1px solid rgba(214,60,255,.3); }
.pp-dlxsfat.da { background: rgba(214,60,255,.16); border-color: rgba(214,60,255,.6); }
.pp-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, transparent), rgba(0,0,0,.25)); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); animation: pp-in .2s ease; }
.pp-card > div:nth-child(2) { flex: 1; min-width: 200px; display: grid; gap: 3px; }
.pp-card b { font: 800 19px Cinzel, serif; color: #f2e6c9; }
.pp-card span { font-size: 13px; color: #cbd3e3; }
.pp-card .pp-s { color: var(--muted); } .pp-card .pp-s b { font: 800 14px Inter, sans-serif; color: var(--gold); }
.pp-card.arunca { border-style: dashed; }
.pp-nota { font-size: 11.5px; color: var(--muted); }
.pp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-alte { margin-top: 10px; font-size: 13px; }
.pp-alte summary { cursor: pointer; color: var(--gold); font-weight: 600; }
.pp-alte ol { margin: 8px 0 6px; padding: 0; list-style: none; display: grid; gap: 4px; }
.pp-alte li { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 9px; background: rgba(0,0,0,.25); cursor: pointer; color: #cbd3e3; }
.pp-alte li:hover { background: rgba(245,197,66,.08); }
.pp-alte li.on { color: var(--gold); }
.pp-alte li em { font-style: normal; font-weight: 800; }
.pp-alte small { color: var(--muted); }

.pp-jos { display: flex; gap: 8px; flex-wrap: wrap; max-width: 560px; margin: 16px auto 0; }
.pp-jos .m2b { padding: 9px 14px; font-size: 12.5px; }
.pp-jos .m2b.on { color: var(--gold); border-color: rgba(245,197,66,.6); }
.pp-jos .m2b:disabled { opacity: .4; cursor: default; }

/* piese */
.pp-piese { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.pp-p { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 92px; padding: 10px 4px 8px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.25); color: var(--text); font: 700 12px Inter, sans-serif; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.pp-p:hover:not(:disabled) { border-color: color-mix(in srgb, var(--c) 70%, transparent); transform: translateY(-1px); }
.pp-p.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, rgba(0,0,0,.25)); box-shadow: 0 0 0 1px var(--c), 0 0 22px color-mix(in srgb, var(--c) 30%, transparent); }
.pp-p:disabled { opacity: .45; cursor: wait; }
.pp-p kbd { position: absolute; top: 6px; right: 6px; font-size: 9.5px; opacity: .7; }
.pp-p.dlx { grid-column: span 3; flex-direction: row; min-height: 0; padding: 10px 14px; gap: 12px; }
.pp-mini { display: inline-grid; grid-template-columns: repeat(var(--w), var(--s)); grid-template-rows: repeat(var(--h), var(--s)); gap: 2px; flex: none; }
.pp-mini i { background-size: 100% 100%; image-rendering: auto; }

/* deluxe */
.pp-dlxr { display: flex; align-items: center; gap: 10px; }
.pp-dlxr img { image-rendering: auto; }
.pp-dlxr > div:nth-child(2) { flex: 1; min-width: 0; }
.pp-dlxr b { display: block; font-size: 14px; }
.pp-dlxr small { font-size: 11px; color: var(--muted); }
.pp-dlxr .pp-cntv { margin: 0; }
.pp-dlxr .pp-cntv b { font-size: 20px; min-width: 22px; }

/* reguli */
.pp-r3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.pp-r3 > div { padding: 14px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid var(--panel-border); }
.pp-r3 > div > b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font: 800 14px Cinzel, serif; color: var(--gold); background: rgba(245,197,66,.1); border: 1px solid rgba(245,197,66,.35); }
.pp-r3 p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: #cbd3e3; }
.pp-r3 p b { color: var(--text); }
.pp-credit .lead a { color: var(--gold); }

@media (max-width: 640px) {
  .pp-sus { grid-template-columns: auto 1fr; }
  .pp-lazi { grid-column: 1 / -1; order: 3; }
  .pp-tabla { gap: 4px; padding: 8px; }
  .pp-card b { font-size: 17px; }
}

/* telefon: piesele stau chiar sub tablă */
.pp-piese-mob { display: none; }
@media (max-width: 999px) {
  .pp-alegere { display: none; }
  .pp-piese-mob { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 560px; margin: 12px auto 0; }
  .pp-pm { display: grid; place-items: center; height: 54px; padding: 0; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.3); cursor: pointer; }
  .pp-pm.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, rgba(0,0,0,.3)); box-shadow: 0 0 0 1px var(--c); }
  .pp-pm:disabled { opacity: .45; }
}
@media (hover: none) { .pp-go kbd, .pp-p kbd { display: none; } }

/* ===== v2: tabla din joc, șansele sub titlu ===== */
.pp-sanse { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.pp-sanse > div { position: relative; min-width: 118px; padding: 9px 14px 10px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.pp-sanse > div::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 1%); background: currentColor; transition: width .4s ease; }
.pp-sanse span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.pp-sanse b { display: block; font: 800 28px/1.1 Cinzel, serif; margin: 2px 0 1px; }
.pp-sanse small { font-size: 11px; color: var(--muted); }
.pp-sanse .zl { color: #f5c542; border-color: rgba(245,197,66,.45); background: linear-gradient(180deg, rgba(245,197,66,.12), rgba(0,0,0,.3)); }
.pp-sanse .zm { color: #cdd5ea; border-color: rgba(154,166,196,.4); }
.pp-sanse .zs { color: #e7b07a; border-color: rgba(201,138,75,.4); }
.pp-sanse.asteapta b { opacity: .4; }

.pp-hero-art { position: relative; flex: none; width: 300px; transform: rotate(-4deg); filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(38,224,238,.15)); }
.pp-hero-art > img { display: block; width: 100%; height: auto; image-rendering: auto; }
.pp-hero-art > div { position: absolute; left: 2%; top: 2.94%; width: 96%; height: 94.12%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); }
.pp-hero-art i { background-size: 100% 100%; image-rendering: auto; }
.pp-hero-art i.g { background: none; }
@media (max-width: 760px) { .pp-hero-art { display: none; } }

.pp-tabla-wrap { position: relative; max-width: 600px; margin: 0 auto; }
.pp-tabla { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); aspect-ratio: 200 / 136; padding: 1.47% 1% 1.47% 1%; padding: 2.94% 2% 2.94% 2%; box-sizing: border-box; background: url(img/tabla.webp) center / 100% 100% no-repeat; image-rendering: auto; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.pp-c { position: relative; padding: 0; border: 0; border-radius: 3px; background-color: transparent; background-size: 100% 100%; background-repeat: no-repeat; image-rendering: auto; cursor: pointer; transition: transform .08s, filter .12s; }
.pp-c:not(.plin):hover { background-color: rgba(255,255,255,.06); }
.pp-c.plin { cursor: default; }
.pp-c.sfat { animation: pp-clip 1s ease-in-out infinite; }
.pp-c.fantoma { opacity: .78; }
.pp-c.rau { opacity: .5; filter: grayscale(1) sepia(1) hue-rotate(-50deg) saturate(4); }
.pp-c.edit { cursor: pointer; }
.pp-c.edit:not(.plin) { box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.pp-c.edit:hover { box-shadow: inset 0 0 0 2px var(--gold); }
@keyframes pp-clip { 0%, 100% { opacity: .35; } 50% { opacity: 1; filter: brightness(1.25) drop-shadow(0 0 6px rgba(255,255,255,.6)); } }
.pp-gata { border-radius: 10px; }

.pp-pimg { display: block; max-height: 56px; width: auto; image-rendering: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.pp-p.dlx .pp-pimg { max-height: 44px; }
.pp-cntv img { image-rendering: auto; margin-right: 4px; }
.pp-dlxr img { width: 36px; height: 36px; }
#sfat.calc { opacity: .55; transition: opacity .15s; pointer-events: none; }
.pp-disc { margin: 18px 4px 0; }
@media (max-width: 640px) {
  .pp-sanse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pp-sanse > div { min-width: 0; padding: 8px 10px 9px; }
  .pp-sanse b { font-size: 22px; }
  .pp-sanse small { font-size: 10px; }
}

/* v3: piese și cufere în rezoluție mare */
.pp-c, .pp-mini i, .pp-pimg, .pp-hero-art i, .pp-cntv img { image-rendering: auto; }
.pp-c { border-radius: 4px; }
.pp-pimg { max-height: 58px; }
.pp-p.dlx .pp-pimg { max-height: 46px; }
.pp-cntv img { width: 34px; height: auto; }
.pp-dlxr img { width: 40px; height: auto; }

/* v4: tabla nouă, sfat mai discret, mărime reglabilă */
.pp-tabla-wrap { max-width: calc(600px * var(--zoom, 1)); transition: max-width .2s ease; }
.pp-tabla { aspect-ratio: 1520 / 1034; padding: 4.967% 3.651% 5.197% 3.454%; background: url(img/tabla.webp) center / 100% 100% no-repeat; border-radius: 14px; box-shadow: none; filter: drop-shadow(0 16px 30px rgba(0,0,0,.55)); }
.pp-c { margin: 1.1%; border-radius: 6px; }
.pp-c.sfat { animation: pp-clip2 1.4s ease-in-out infinite; }
.pp-c.fantoma { opacity: .45; }
@keyframes pp-clip2 { 0%, 100% { opacity: .18; } 50% { opacity: .5; } }
.pp-c.nou { animation: pp-pop .45s ease-out; }
@keyframes pp-pop { 0% { transform: scale(.6); filter: brightness(2); } 60% { transform: scale(1.06); filter: brightness(1.4); } 100% { transform: scale(1); filter: none; } }
.pp-hero-art > div { left: 3.454%; top: 7.302%; width: 92.895%; height: 85.06%; }
.pp-hero-art i { margin: 1.1%; border-radius: 3px; }
.pp-zoom { display: flex; align-items: center; justify-content: flex-end; gap: 6px; max-width: calc(600px * var(--zoom, 1)); margin: 0 auto 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pp-zoom span { margin-right: 2px; }
.pp-zoom b { min-width: 44px; text-align: center; font-size: 12px; color: var(--text); letter-spacing: 0; }
.pp-zoom .pp-mic:disabled { opacity: .35; cursor: default; }
@media (max-width: 640px) { .pp-zoom { display: none; } .pp-tabla-wrap { max-width: 600px; } }