/* Interaktivní prvky JHRE: test připravenosti a hra Očima kupujícího */

/* ---------- Test připravenosti ---------- */
.rt{display:grid;grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);min-height:calc(100vh - 92px);background:var(--paper)}
.rt-side{background:var(--ink);color:#fff;padding:clamp(48px,6vw,100px) clamp(24px,5vw,84px);display:flex;flex-direction:column;justify-content:center}
.rt-side h1{font:500 clamp(42px,4.6vw,72px)/1.03 var(--display);letter-spacing:-.03em;margin:0 0 26px;text-wrap:balance}
.rt-side h1 em{font-style:normal;color:var(--brass)}
.rt-lead{color:#b7c2c0;font-size:17px;line-height:1.65;max-width:470px;margin:0 0 36px}
.rt-areas{list-style:none;margin:0 0 40px;padding:0;border-top:1px solid #ffffff22;max-width:470px}
.rt-areas li{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid #ffffff22;color:#8f9e9c;font-size:14px;transition:color .25s}
.rt-areas li:before{content:'';width:8px;height:8px;border:1px solid currentColor;transform:rotate(45deg);margin-right:14px;flex:0 0 8px;transition:background .25s}
.rt-areas li span{flex:1}
.rt-areas i{font:600 11px var(--mono);font-style:normal;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.rt-areas li.is-active{color:#fff}
.rt-areas li.is-done{color:var(--brass)}
.rt-areas li.is-done:before{background:var(--brass)}
.rt-quote{margin:0;max-width:470px;padding-left:18px;border-left:1px solid var(--brass);font:400 18px/1.5 var(--display);color:#d7dddc}
.rt-quote cite{display:block;margin-top:10px;font:600 10px var(--mono);font-style:normal;letter-spacing:.13em;text-transform:uppercase;color:#8f9e9c}

.rt-stage{padding:clamp(48px,6vw,100px) clamp(24px,6vw,110px);display:flex;flex-direction:column;justify-content:center;min-width:0}
.rt-screen[hidden]{display:none!important}
.rt-stage .section-label{margin-bottom:18px}
.rt-stage h2{font:500 clamp(30px,3.2vw,46px)/1.12 var(--display);letter-spacing:-.02em;margin:0 0 14px;max-width:24ch;text-wrap:balance}
.rt-stage h2:focus{outline:none}
.rt-hint{color:#586462;font-size:16px;max-width:560px;margin:0 0 30px;min-height:1.5em}
.rt-options{display:grid;gap:10px;max-width:640px}
.rt-intro .rt-options{margin-top:26px}
.rt-option{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:18px 20px;background:#fff;border:1px solid var(--stone);color:var(--ink);cursor:pointer;transition:border-color .2s,transform .2s,background .2s}
.rt-option:hover{border-color:var(--ink);transform:translateX(4px)}
.rt-option strong{font-weight:500;font-size:16px;line-height:1.4}
.rt-types .rt-option{flex-direction:column;align-items:flex-start;gap:3px}
.rt-types .rt-option strong{font:500 22px var(--display)}
.rt-types .rt-option span{font-size:13px;color:#6a7573}
.rt-option i{flex:0 0 30px;height:30px;display:grid;place-items:center;border:1px solid var(--stone);font:600 11px var(--mono);font-style:normal;color:#6a7573;transition:.2s}
.rt-option.is-picked{border-color:var(--ink);background:var(--ink);color:#fff}
.rt-option.is-picked i{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.rt-note{margin:22px 0 0;font-size:13px;color:#6a7573;max-width:560px}
.rt-progress{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;max-width:640px;margin-bottom:34px}
.rt-progress i{height:3px;background:var(--stone);transition:background .3s}
.rt-progress i.done{background:var(--ink)}
.rt-progress i.now{background:var(--brass)}
.rt-back{margin-top:24px;align-self:flex-start;background:none;border:0;padding:6px 0;color:#586462;font-size:13px;cursor:pointer;border-bottom:1px solid transparent}
.rt-back:hover{color:var(--ink);border-color:var(--ink)}
.rt-back[hidden]{display:none}

.rt-result{max-width:760px}
.rt-score{position:relative;width:132px;height:132px;margin-bottom:26px}
.rt-score svg{width:100%;height:100%;transform:rotate(-90deg)}
.rt-ring-bg{fill:none;stroke:var(--stone);stroke-width:8}
.rt-ring{fill:none;stroke:var(--brass);stroke-width:8;stroke-linecap:butt;stroke-dasharray:0 100;transition:stroke-dasharray 1.2s cubic-bezier(.2,.7,.2,1)}
.rt-score div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rt-score strong{font:500 34px var(--display);font-variant-numeric:tabular-nums}
.rt-score span{font:600 9px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#6a7573}
.rt-result-lead{font-size:17px;color:#3d4a4c;max-width:600px;margin:0 0 34px}
.rt-bars{display:grid;gap:12px;margin-bottom:44px;max-width:600px}
.rt-bar{display:grid;grid-template-columns:170px 1fr 48px;align-items:center;gap:14px;font-size:14px}
.rt-bar b{height:6px;background:var(--stone);display:block;overflow:hidden}
.rt-bar b i{display:block;height:100%;background:var(--ink);animation:rt-grow 1s ease both}
.rt-bar.rt-mid b i{background:var(--brass)}
.rt-bar.rt-low b i{background:#a8472e}
.rt-bar em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:#586462}
.rt-todo h3,.rt-done h3{font:500 26px var(--display);margin:0 0 16px}
.rt-todo ol{list-style:none;margin:0 0 40px;padding:0;counter-reset:todo;border-top:1px solid var(--stone)}
.rt-todo li{counter-increment:todo;position:relative;padding:20px 0 20px 48px;border-bottom:1px solid var(--stone)}
.rt-todo li:before{content:counter(todo,decimal-leading-zero);position:absolute;left:0;top:22px;font:600 11px var(--mono);letter-spacing:.1em;color:#8a6c35}
.rt-todo li.is-urgent:before{color:#a8472e}
.rt-todo li span{display:block;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#6a7573;margin-bottom:4px}
.rt-todo li strong{display:block;font:500 19px/1.3 var(--display);margin-bottom:6px}
.rt-todo li p{margin:0 0 10px;color:#3d4a4c;font-size:15px;max-width:600px}
.rt-todo li a{font-size:12px;font-weight:500;border-bottom:1px solid var(--brass);padding-bottom:3px}
.rt-done ul{list-style:none;margin:0 0 40px;padding:0;display:grid;gap:8px}
.rt-done li{position:relative;padding-left:26px;font-size:15px;color:#3d4a4c}
.rt-done li:before{content:'✓';position:absolute;left:0;color:#8a6c35;font-weight:600}
.rt-result-actions{display:flex;gap:12px;flex-wrap:wrap}
.rt-ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.rt-attached{margin:0;padding:14px 16px;border:1px solid #c6a56a66;color:#e9dcc0;font-size:13px;line-height:1.5}
.rt-attached:before{content:'◆ ';color:var(--brass)}
@keyframes rt-grow{from{width:0!important}}

@media(max-width:900px){
  .rt{grid-template-columns:1fr;min-height:0}
  .rt-side{padding:56px 22px 44px}
  .rt-areas{display:none}
  .rt-quote{display:none}
  .rt-lead{margin-bottom:0}
  .rt-stage{padding:44px 22px 60px;scroll-margin-top:0}
  .rt-bar{grid-template-columns:1fr 44px;row-gap:6px}.rt-bar span{grid-column:1/-1}
  .rt-result-actions .button{flex:1 1 100%}
}

/* ---------- Hra Očima kupujícího ---------- */
.ob{background:var(--ink);color:#fff;padding:clamp(40px,5vw,80px) clamp(24px,5vw,84px)}
.ob-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:34px}
.ob-head h1{font:500 clamp(40px,4.6vw,72px)/1.03 var(--display);letter-spacing:-.03em;margin:0;text-wrap:balance}
.ob-head h1 em{font-style:normal;color:var(--brass)}
.ob-head p:not(.eyebrow){color:#b7c2c0;font-size:17px;max-width:620px;margin:18px 0 0}
.ob-head .eyebrow{margin-bottom:22px}
.ob-rooms{display:flex;gap:8px}
.ob-rooms button{background:transparent;border:1px solid #ffffff2e;color:#b7c2c0;padding:11px 16px;font-size:12px;cursor:pointer;display:flex;gap:10px;align-items:center}
.ob-rooms button b{font:600 11px var(--mono);color:var(--brass);font-variant-numeric:tabular-nums}
.ob-rooms button.is-active{border-color:var(--brass);color:#fff}
.ob-rooms button:disabled{opacity:.45;cursor:not-allowed}

.ob-board{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr);gap:clamp(20px,3vw,44px);align-items:start}
.ob-photo{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:#1a2a31;cursor:crosshair;user-select:none;-webkit-user-select:none;touch-action:manipulation;max-width:100%}
.ob-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .8s ease,filter .8s ease}
.ob-photo .ob-after{opacity:0}
.ob-photo.is-revealed{cursor:default}
.ob-photo.is-revealed .ob-after{opacity:1}
.ob-photo.is-revealed .ob-before{filter:blur(2px)}
.ob-mark{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:2px solid var(--brass);box-shadow:0 0 0 4px #0c192166,inset 0 0 0 3px #0c192140;display:grid;place-items:center;font:600 14px var(--mono);color:var(--ink);pointer-events:none;animation:ob-pop .45s cubic-bezier(.2,1.6,.4,1)}
.ob-mark span{width:22px;height:22px;border-radius:50%;background:var(--brass);display:grid;place-items:center;font-size:12px}
.ob-miss{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;pointer-events:none;animation:ob-miss .7s ease forwards}
.ob-miss:before,.ob-miss:after{content:'';position:absolute;left:50%;top:50%;width:18px;height:2px;background:#fff;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 6px #0009}
.ob-miss:after{transform:translate(-50%,-50%) rotate(-45deg)}
.ob-photo.is-revealed .ob-mark,.ob-photo.is-revealed .ob-miss{opacity:0;transition:opacity .4s}
.ob-tag{position:absolute;left:16px;top:16px;background:var(--paper);color:var(--ink);padding:7px 10px;font:600 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;z-index:2}
.ob-photo.is-revealed .ob-tag{background:var(--brass)}

.ob-panel{display:flex;flex-direction:column;gap:22px;min-width:0}
.ob-count{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid #ffffff22;padding-bottom:18px}
.ob-count strong{font:500 56px/1 var(--display);font-variant-numeric:tabular-nums}
.ob-count span{color:#8f9e9c;font-size:14px}
.ob-dots{display:flex;gap:6px;margin-left:auto}
.ob-dots i{width:10px;height:10px;border:1px solid #ffffff55;transform:rotate(45deg);transition:.3s}
.ob-dots i.on{background:var(--brass);border-color:var(--brass)}
.ob-found{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ob-found li{padding:0 0 14px;border-bottom:1px solid #ffffff14;animation:ob-rise .35s ease}
.ob-found li b{display:flex;gap:10px;align-items:center;font:500 19px var(--display);margin-bottom:4px}
.ob-found li b i{flex:0 0 22px;height:22px;border-radius:50%;background:var(--brass);color:var(--ink);display:grid;place-items:center;font:600 11px var(--mono);font-style:normal}
.ob-found li p{margin:0 0 0 32px;color:#aebbb9;font-size:14px;line-height:1.55}
.ob-found li.is-missed b i{background:transparent;border:1px solid #ffffff55;color:#fff}
.ob-found li.is-missed b{color:#aebbb9}
.ob-empty{color:#8f9e9c;font-size:14px;margin:0}
.ob-actions{display:flex;gap:10px;flex-wrap:wrap}
.ob-ghost{background:transparent;color:#fff;border:1px solid #ffffff44}
.ob-ghost:hover{border-color:#fff}
.ob-verdict{padding:22px;background:#ffffff08;border-top:2px solid var(--brass);animation:ob-rise .4s ease}
.ob-verdict h2{font:500 26px/1.15 var(--display);margin:0 0 8px}
.ob-verdict p{margin:0 0 16px;color:#c3ccca;font-size:15px}
.ob-verdict[hidden]{display:none}

.ob-final{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:clamp(80px,10vw,140px) clamp(24px,8vw,140px);background:var(--paper);align-items:end}
.ob-final h2{font:500 clamp(40px,4.6vw,68px)/1.04 var(--display);letter-spacing:-.025em;margin:0}
.ob-final h2 em{font-style:normal;color:#8a6c35}
.ob-final p:not(.section-label){font-size:17px;max-width:560px;margin:0 0 30px;color:#3d4a4c}
.ob-final-numbers{display:flex;gap:30px;margin:0 0 30px;flex-wrap:wrap}
.ob-final-numbers div{display:flex;flex-direction:column}
.ob-final-numbers strong{font:500 44px/1 var(--display);font-variant-numeric:tabular-nums}
.ob-final-numbers span{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#6a7573;margin-top:6px}
.ob-final-actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap}

@keyframes ob-pop{from{transform:translate(-50%,-50%) scale(.2);opacity:0}}
@keyframes ob-miss{0%{opacity:1;transform:translate(-50%,-50%) scale(.6)}30%{transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes ob-rise{from{opacity:0;transform:translateY(8px)}}

@media(max-width:1000px){
  .ob{padding:44px 16px 56px}
  .ob-head{grid-template-columns:1fr;gap:22px}
  .ob-board{grid-template-columns:1fr}
  .ob-mark{width:34px;height:34px}.ob-mark span{width:18px;height:18px;font-size:10px}
  .ob-count strong{font-size:44px}
  .ob-final{grid-template-columns:1fr;padding:70px 22px}
}
@media(prefers-reduced-motion:reduce){
  .rt-ring,.rt-bar b i,.ob-mark,.ob-miss,.ob-found li,.ob-verdict,.ob-photo img{animation:none;transition:none}
  .rt-option:hover{transform:none}
}
.ob-actions[hidden],.rt-screen[hidden]{display:none!important}
.ob-photo{width:100%;max-width:calc((100vh - 110px) * 4 / 3)}@media(max-width:1000px){.ob-photo{max-width:100%}}