/* DOM-REALÍT – Hry o bývaní */
.hry-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:48px}
.hry-tabs .fbtn[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.game-head{max-width:720px;margin-bottom:32px}
.game-head p{font-size:19px;margin:12px 0 0}
.game-meta{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-weight:600;font-family:var(--cond);font-size:20px;margin-bottom:16px}
.game-end{margin-top:40px;padding:40px;background:var(--dark2);color:var(--cream)}
.game-end h3{font-family:var(--cond);font-size:44px;line-height:1.05;margin:0 0 12px}
.game-end p{font-size:19px;max-width:640px;margin:0 0 24px}
.game-end .btns{display:flex;gap:12px;flex-wrap:wrap}
.game-end .btn{background:var(--sage);color:var(--ink);border-color:var(--sage)}
.game-end .btn2{color:var(--cream);border-color:var(--cream);font-size:19px;padding:16px 28px}
.btn2{background:transparent}
.btn2:disabled{opacity:.35;cursor:default}

/* 1. Tipni si cenu */
.cena-body{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
.cena-photo{aspect-ratio:4/3;background:var(--photo);overflow:hidden}
.cena-photo img{width:100%;height:100%;object-fit:cover;display:block;animation:hry-in .5s ease}
.cena-title{font-size:34px;line-height:1.1;margin:0 0 6px}
.cena-sum{margin:0 0 28px;font-size:18px}
.cena-label{display:block;font-weight:600;margin-bottom:4px}
.cena-out{display:block;font-family:var(--cond);font-weight:700;font-size:52px;line-height:1;margin-bottom:12px}
.cena-range{width:100%;height:36px;accent-color:var(--ink);margin:0 0 20px}
.cena-result{min-height:84px;margin-bottom:16px}
.cena-result .real{font-family:var(--cond);font-weight:700;font-size:28px}
.cena-result .pts{display:inline-block;background:var(--sage);padding:2px 10px;font-weight:600;margin-left:8px}
.cena-result a{font-weight:600}

/* 2. Obhliadka */
.obh-body{display:grid;grid-template-columns:1.7fr 1fr;gap:40px;align-items:start}
.obh-scene svg{display:block;width:100%;height:auto;cursor:crosshair;touch-action:manipulation;user-select:none}
.obh-scene .hit{fill:transparent;stroke:var(--ink);stroke-width:4;opacity:0}
.obh-scene .hit.found{opacity:1;animation:hry-ring .5s ease}
.obh-scene .hit.shown{opacity:.9;stroke-dasharray:8 6}
.obh-scene .miss{fill:none;stroke:#b3261e;stroke-width:4;animation:hry-fade 1s ease forwards}
.obh-info{background:var(--beige);padding:20px 22px;min-height:150px;margin-bottom:20px}
.obh-info h4{font-family:var(--cond);font-size:24px;margin:0 0 6px}
.obh-info p{margin:0}
.obh-list{list-style:none;padding:0;margin:0 0 20px}
.obh-list li{padding:8px 0;border-bottom:1px solid #d9d4c4;font-weight:500}
.obh-list li::before{content:"✓ ";color:var(--green);font-weight:700}
.obh-list li.miss-li{color:#6b6a72}
.obh-list li.miss-li::before{content:"○ ";color:#b3261e}
.obh-top{justify-content:flex-start}
.obh-top .obh-score{margin-left:auto}
.obh-next{margin-top:4px}
.obh-scene .pen{font:700 26px var(--cond);fill:#b3261e;animation:hry-up 1s ease forwards}
.obh-q{max-width:820px}
.obh-q-fb{margin:20px 0}
.obh-q-fb .ok{font-weight:700;color:var(--green)}
.obh-q-fb .no{font-weight:700;color:#b3261e}
.obh-q .kviz-a button[disabled]{cursor:default;opacity:.55}
.obh-q .kviz-a button.right{background:var(--sage);border-color:var(--green);color:var(--ink);opacity:1}
.obh-q .kviz-a button.wrong{background:#e9d2cf;border-color:#b3261e;color:var(--ink);opacity:1}
@keyframes hry-up{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-24px)}}

/* 3. Kvíz */
.kviz-body{max-width:820px}
.kviz-bar{height:6px;background:var(--beige);margin-bottom:20px}
.kviz-bar span{display:block;height:100%;width:0;background:var(--ink);transition:width .4s ease}
.kviz-step{font-weight:600;margin:0 0 6px;color:#55545c}
.kviz-q{font-size:36px;line-height:1.1;margin:0 0 24px}
.kviz-a{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kviz-a button{font:inherit;font-size:18px;text-align:left;padding:18px 22px;background:transparent;border:2px solid var(--ink);cursor:pointer;transition:background .2s,color .2s}
.kviz-a button:hover,.kviz-a button:focus-visible{background:var(--ink);color:var(--cream)}
.kviz-body.anim .kviz-q,.kviz-body.anim .kviz-a{animation:hry-in .35s ease}

/* 5. Pexeso */
.pex-meta .btn2{min-height:40px;padding:6px 16px;font-family:var(--body);font-size:16px}
.pex-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:820px}
.pex-card{display:block;width:100%;aspect-ratio:1;perspective:900px;cursor:pointer;border:0;padding:0;background:none}
.pex-in{display:block;position:relative;width:100%;height:100%;transition:transform .45s ease;transform-style:preserve-3d}
.pex-card.open .pex-in,.pex-card.done .pex-in{transform:rotateY(180deg)}
.pex-f,.pex-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pex-f{background:var(--ink)}
.pex-f img{width:44%;opacity:.9}
.pex-card:nth-child(3n+2) .pex-f{background:var(--green)}
.pex-card:nth-child(3n) .pex-f{background:var(--purple)}
.pex-b{transform:rotateY(180deg);background:var(--beige)}
.pex-b img{width:100%;height:100%;object-fit:cover}
.pex-b svg{width:60%;height:60%}
.pex-card.done .pex-b{box-shadow:0 0 0 4px var(--sage) inset}

@keyframes hry-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hry-ring{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes hry-fade{from{opacity:1}to{opacity:0}}
.obh-scene .hit{transform-box:fill-box;transform-origin:center}

@media (max-width:900px){
	.cena-body,.obh-body{grid-template-columns:1fr;gap:24px}
	.cena-out{font-size:40px}
	.kviz-q{font-size:28px}
	.kviz-a{grid-template-columns:1fr}
	.pex-grid{gap:8px}
	.game-end{padding:28px 20px}
	.game-end h3{font-size:32px}
	.hry-tabs{margin-bottom:32px}
	.hry-tabs .fbtn{padding:8px 14px;min-height:40px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.pex-in{transition:none}.cena-photo img,.kviz-body.anim .kviz-q,.kviz-body.anim .kviz-a{animation:none}}
.pex-grid,.hry-tabs{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.obh-mode{display:flex;gap:8px;margin:16px 0 4px}
.obh-mode .fbtn[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.game.pro .obh-mode .fbtn[data-mode="p"][aria-pressed="true"]{background:#8a2e25;border-color:#8a2e25}
.obh-time{color:#8a2e25}
