/* Félix, a rossz kecske (pages/felix.php): önálló, teljes képernyős játék, a webhely sablonja nélkül */
:root{--y:#FFC83D;--o:#F5A623;--br:#3B2A1A;--cr:#FFF7E6;--ok:#2E9E44}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:#9ED67F;color:var(--br);font:700 16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;cursor:pointer}
#cv{position:fixed;inset:0;display:block;touch-action:none}
/* HUD */
.hud{position:fixed;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));pointer-events:none;z-index:5}
.pill{background:#fff;border:3px solid var(--br);border-radius:999px;padding:4px 12px;display:flex;align-items:center;gap:6px;box-shadow:0 3px 0 var(--br);font-weight:900;white-space:nowrap}
.lives img{width:30px;height:30px;transition:opacity .3s,transform .3s}
.lives img.lost{opacity:.25;transform:scale(.8)}
.sp{flex:1}
.hb{pointer-events:auto;width:46px;height:46px;border-radius:14px;border:3px solid var(--br);background:#fff;display:grid;place-items:center;padding:0;box-shadow:0 3px 0 var(--br)}
.hb svg{width:24px;height:24px}
.run{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:96px;height:96px;border-radius:50%;border:4px solid var(--br);background:conic-gradient(var(--y) calc(var(--p,1)*360deg),#E9D9AE 0);box-shadow:0 5px 0 var(--br);font-weight:900;font-size:17px;z-index:5;touch-action:none;display:grid;place-items:center;line-height:1.1}
.run:active{transform:translateY(3px);box-shadow:0 2px 0 var(--br)}
.toast{position:fixed;left:50%;top:76px;transform:translate(-50%,-20px);opacity:0;background:var(--y);border:3px solid var(--br);border-radius:16px;padding:8px 16px;font-weight:900;font-size:clamp(16px,4.4vw,21px);box-shadow:0 4px 0 var(--br);transition:opacity .25s,transform .25s;z-index:6;pointer-events:none;text-align:center;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
[hidden]{display:none!important}
/* képernyők */
.scr{position:fixed;inset:0;z-index:20;background:var(--cr);overflow:auto;display:flex;flex-direction:column;align-items:center;padding:20px 16px;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom));text-align:center;transition:opacity .3s,visibility .3s}
.scr.dim{background:rgba(255,247,230,.94)}
.scr.off{opacity:0;visibility:hidden}
.box{width:100%;max-width:560px;margin:auto}
h1{font-size:clamp(30px,8vw,48px);line-height:1.05;margin:4px 0 6px;font-weight:900;letter-spacing:-.5px}
h1 span{color:#B5703D}
h2{font-size:clamp(24px,6vw,32px);margin:4px 0 8px;font-weight:900}
.lead{font-size:clamp(16px,4.2vw,19px);margin:0 0 10px;font-weight:700}
.strip{display:block;width:100%;height:170px;margin:4px 0 10px;border-radius:18px;border:3px solid var(--br);background:#9ED67F}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:64px;padding:0 36px;border-radius:999px;border:3px solid var(--br);background:var(--y);font-weight:900;font-size:24px;box-shadow:0 5px 0 var(--br);transition:transform .1s,box-shadow .1s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--br)}
.btn.sec{background:#fff;font-size:18px;min-height:52px;padding:0 24px}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.seg{display:inline-flex;border:3px solid var(--br);border-radius:999px;overflow:hidden;margin:6px 0 16px;background:#fff}
.seg button{border:0;background:none;padding:10px 16px;font-weight:900;font-size:16px}
.seg button[aria-pressed=true]{background:var(--y)}
.seg button+button{border-left:3px solid var(--br)}
.how{background:#fff;border:3px solid var(--o);border-radius:18px;padding:12px 16px;text-align:left;font-weight:600;font-size:15px;margin-top:16px}
.how b{font-weight:900}
.how ul{margin:6px 0 0;padding-left:20px}
.best{font-size:15px;margin-top:8px}
.list{list-style:none;padding:0;margin:10px 0;text-align:left;display:grid;gap:6px}
.list li{background:#fff;border:2px solid #E9D9AE;border-radius:12px;padding:8px 12px;display:flex;gap:10px;align-items:center;font-weight:700}
.list li.ok{border-color:var(--ok);background:#E6F6E8}
.list i{font-style:normal;width:24px;height:24px;border-radius:50%;border:2px solid var(--br);display:grid;place-items:center;flex:none;font-size:14px;background:#fff}
.list li.ok i{background:var(--ok);color:#fff;border-color:var(--ok)}
.stars{display:flex;justify-content:center;gap:8px;margin:6px 0}
.stars svg{width:54px;height:54px}
.stars .no{opacity:.2}
.stat{font-size:18px;margin:4px 0}
.ldbar{width:240px;max-width:80%;height:14px;margin:14px auto 0;border-radius:999px;background:#FFE7A6;overflow:hidden;border:2px solid var(--br)}
.ldbar i{display:block;width:40%;height:100%;background:var(--o);border-radius:999px;animation:lb 1.1s ease-in-out infinite}
@keyframes lb{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.ldt{font-size:22px;font-weight:900;margin:8px 0 0}
.kb{display:none;font-size:11px;font-weight:800;opacity:.75}
@media (hover:hover) and (pointer:fine){.kb{display:block}}
/* alacsony képernyő (laptop, fekvő telefon) */
@media (max-height:780px){
  h1{font-size:clamp(26px,6vh,40px)}
  .lead{margin-bottom:6px}
  .strip{height:130px;margin:2px 0 8px}
  .seg{margin:4px 0 10px}
  .btn{min-height:56px;font-size:22px}
  .how{margin-top:10px;font-size:14px;padding:10px 14px}

  .list li{padding:6px 10px}
  .stars svg{width:44px;height:44px}
}
/* széles, de alacsony képernyő: két oszlop a főmenüben */
@media (min-width:900px) and (max-height:820px){
  #start .box{max-width:980px;display:grid;grid-template-columns:1fr 360px;gap:0 28px;align-items:center}
  #start .box>*{grid-column:1}
  #start .seg{justify-self:center}
  #start .how{grid-column:2;grid-row:1/9;margin:0;align-self:center}
}
/* keskeny telefon: tömörebb felső sáv */
@media (max-width:420px){
  .hud{gap:5px;padding-left:8px;padding-right:8px}
  .pill{padding:3px 8px;font-size:14px;gap:3px}
  .lives img{width:24px;height:24px}
  .hb{width:40px;height:40px;border-radius:12px}
  .hb svg{width:20px;height:20px}
  .run{width:84px;height:84px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* a kezdőképernyő alja: Radocsai logó és tájékoztató (mint a méhecske-kvíznél) */
.disc{margin-top:14px;font-size:12.5px;font-weight:500;line-height:1.45;text-align:center}
.disc .logo{display:inline-block;line-height:0;margin-bottom:8px}
.disc .logo img{height:48px;width:auto}
.disc p{margin:0 0 6px;opacity:.8}
.disc a{color:inherit}