/* ══════════════════════════════════════════════════════════════
   HEROES OF HUNGARY — „Plakátháború” design rendszer
   Betonfal · ragasztott plakátpapír · riso spot-színek · bélyegzők
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Big Shoulders';font-weight:700;font-display:swap;src:url(fonts/big-shoulders-display-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Big Shoulders';font-weight:700;font-display:swap;src:url(fonts/big-shoulders-display-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Big Shoulders';font-weight:800;font-display:swap;src:url(fonts/big-shoulders-display-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Big Shoulders';font-weight:800;font-display:swap;src:url(fonts/big-shoulders-display-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Big Shoulders';font-weight:900;font-display:swap;src:url(fonts/big-shoulders-display-latin-ext-900-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Big Shoulders';font-weight:900;font-display:swap;src:url(fonts/big-shoulders-display-latin-900-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-weight:400;font-display:swap;src:url(fonts/newsreader-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-weight:400;font-style:italic;font-display:swap;src:url(fonts/newsreader-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-weight:400;font-style:italic;font-display:swap;src:url(fonts/newsreader-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-weight:600;font-display:swap;src:url(fonts/newsreader-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-weight:600;font-display:swap;src:url(fonts/newsreader-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

:root{
  /* fal és papír */
  --wall:#3b3a36; --wall-dark:#2a2926;
  --paper:#ebe6d8; --paper-2:#dbd5c3; --paper-3:#c6bfa9;
  /* nyomdafesték */
  --ink:#231f1c; --ink-2:#4d463d; --ink-3:#7b7263;
  /* riso spot színek */
  --red:#d9352b; --yellow:#efc132; --blue:#2e5484; --green:#3d6b3c; --ner:#e07b24;
  --good:#2e6b34; --bad:#b0271f;
  --f-display:'Big Shoulders','Arial Narrow',Impact,sans-serif;
  --f-body:'Newsreader',Georgia,'Times New Roman',serif;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --pnoise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .17  0 0 0 0 .1  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --fibers:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.02 .9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--wall-dark)}
body{overflow-x:hidden;font-family:var(--f-body);color:var(--ink);-webkit-font-smoothing:antialiased}
#root{min-height:100vh}
.hoh-wall{
  background-color:var(--wall);
  background-image:var(--noise),
    radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.06),transparent 60%),
    radial-gradient(ellipse at 80% 90%,rgba(0,0,0,.35),transparent 60%);
  background-size:220px 220px,100% 100%,100% 100%;
  background-attachment:fixed;
}
/* halvány ragasztónyomok a falon */
.hoh-wall::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 28% 18% at 12% 22%,rgba(227,222,208,.06),transparent 70%),
    radial-gradient(ellipse 22% 30% at 88% 30%,rgba(227,222,208,.05),transparent 70%),
    radial-gradient(ellipse 30% 20% at 70% 85%,rgba(217,53,43,.05),transparent 70%)}
.hoh-wall>*{position:relative;z-index:1}

/* papírlap */
.paper{background-color:var(--paper);background-image:var(--fibers),var(--pnoise);background-size:300px 300px,180px 180px;color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.25),5px 6px 0 rgba(0,0,0,.32)}
.tape::after{content:'';position:absolute;top:-9px;left:50%;width:74px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(233,226,196,.72);box-shadow:0 1px 2px rgba(0,0,0,.25);pointer-events:none}

/* gombok: bélyegző nyomat */
button{font-family:var(--f-display)}
button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
button:not(:disabled){transition:transform .06s ease,box-shadow .06s ease}
button:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)!important}
button:disabled{cursor:not-allowed!important;filter:grayscale(.6)}

h1,h2,h3{font-family:var(--f-display);font-weight:900;letter-spacing:.01em;line-height:.95}

.hoh-layout{display:flex;flex:1;overflow:hidden;gap:14px;padding:12px 14px 14px}
.hoh-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;min-width:0}
.hoh-sidebar{padding:4px 2px 60px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.hoh-sidebar-map{width:370px;min-width:330px}
.hoh-sidebar-battle{width:330px;min-width:290px}
.hoh-sidebar-town{width:400px;min-width:350px}
.hoh-topbar{display:flex;align-items:stretch;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 14px 0}
.hoh-topbar-res{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* kép, amit plakátként kiragasztottunk (fehér nyomdai margó) */
.print{background:var(--paper);padding:7px;box-shadow:0 1px 0 rgba(0,0,0,.3),6px 7px 0 rgba(0,0,0,.35);position:relative}
.print canvas,.print img{display:block}

.hoh-tip{position:absolute;z-index:40;pointer-events:none;width:220px;padding:9px 11px;font-size:13px;line-height:1.35}

/* log */
.log-line{padding:2px 0;border-bottom:1px dashed rgba(35,31,28,.14)}
.log-narr{font-style:italic;color:#6a3d7a}

@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes slideIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.anim-slide{animation:slideIn .25s ease-out}

/* ── A WOW PILLANAT: plakát a falra ── */
@keyframes slap{
  0%{transform:translate(-50%,-50%) scale(1.35) rotate(-9deg);opacity:0;filter:blur(3px)}
  55%{transform:translate(-50%,-50%) scale(.97) rotate(-1deg);opacity:1;filter:none}
  72%{transform:translate(-50%,-50%) scale(1.012) rotate(-2.2deg)}
  100%{transform:translate(-50%,-50%) scale(1) rotate(-1.6deg)}
}
@keyframes rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes stampIn{0%{transform:scale(2.4) rotate(-18deg);opacity:0}60%{transform:scale(.92) rotate(-11deg);opacity:1}100%{transform:scale(1) rotate(-12deg);opacity:.92}}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-4px,2px)}40%{transform:translate(3px,-3px)}60%{transform:translate(-2px,3px)}80%{transform:translate(2px,-1px)}}
@keyframes inkIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.poster-dim{position:fixed;inset:0;z-index:180;background:rgba(20,19,17,.72);backdrop-filter:blur(1.5px)}
.poster-rays{position:fixed;left:50%;top:50%;width:170vmax;height:170vmax;z-index:181;pointer-events:none;opacity:.5;
  transform:translate(-50%,-50%);animation:rays 90s linear infinite;
  background:repeating-conic-gradient(from 0deg,var(--ray,#d9352b) 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0 12%,transparent 55%);mask:radial-gradient(circle,#000 0 12%,transparent 55%)}
.poster{position:fixed;left:50%;top:50%;z-index:182;width:min(560px,92vw);max-height:92vh;overflow:auto;padding:22px 26px 24px;
  animation:slap .55s cubic-bezier(.2,.9,.25,1.15) both;transform:translate(-50%,-50%) rotate(-1.6deg);cursor:pointer}
.stamp{display:inline-block;font-family:var(--f-display);font-weight:900;letter-spacing:.04em;border:4px solid currentColor;padding:2px 12px 0;
  animation:stampIn .45s .35s cubic-bezier(.2,.9,.3,1.2) both;mix-blend-mode:multiply}
.halftone{background-image:radial-gradient(circle at center,rgba(35,31,28,.9) 0 32%,transparent 34%);background-size:7px 7px}
.shake{animation:shake .32s linear}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .poster-rays{animation:none}
}
@media(max-width:900px){
  .hoh-layout{flex-direction:column;overflow:auto;padding:8px}
  .hoh-sidebar{width:100%!important;min-width:0!important;padding-bottom:70px}
  .hoh-sidebar-map,.hoh-sidebar-battle,.hoh-sidebar-town{width:100%!important;min-width:0!important}
  .hoh-topbar{padding:6px 8px 0}
}
.on-wall{color:var(--paper-2)}
.on-wall b{color:#fff}
@media(min-width:901px){
  .hoh-app{height:100vh;overflow:hidden}
  .hoh-app .hoh-layout{min-height:0}
  .hoh-app .hoh-sidebar{max-height:100%}
}
.hoh-sidebar{scrollbar-width:thin;scrollbar-color:var(--paper-3) transparent}
.news-toast{top:70px;left:50%;transform:translateX(-50%)}
@media(max-width:900px){
  .hoh-topbar>*{flex:1 1 auto}
  .hoh-topbar-res{width:100%;justify-content:space-between}
  .hoh-topbar-res>span{padding:2px 4px!important}
  .news-toast{top:auto;bottom:12px}
}
.brand-stamp{cursor:pointer;background:rgba(235,230,216,.2)}
.brand-stamp:hover{color:var(--ink)!important}
@media(max-width:760px){.brand-stamp{font-size:16px!important;right:10px!important;top:12px!important}}