/* Hog Noon - the MOAR! page (js/moar.js, HogNoon.Client/Pages/Moar.razor): our other sites and games, one wanted poster each, tacked to
   the saloon wall over the title painting. The game's palette and lettering (Rye headlines, Bangers for the shout, Alegreya for the words). */

.mo {
    --ink: #2a150a; --paper: #f1e2bd; --paper2: #e3cc98; --wood: #7a4f2a; --wood2: #5a3618; --brass: #d9a93e; --red: #b8321f; --cream: #f6e7c4; --gold: #f6d68f;
    --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
    position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: #1a0f08; color: var(--cream); font-family: Alegreya, Georgia, serif; -webkit-tap-highlight-color: transparent;
}
.mo * { box-sizing: border-box; }
/* the title painting behind it all, soft and dark; then a lamp-lit vignette */
.mo-bg { position: fixed; inset: -40px; background: #1a0f08 center / cover no-repeat; filter: blur(10px) brightness(.42) saturate(.9); transform: scale(1.04); }
.mo-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 20%, rgba(255, 190, 110, .18), transparent 60%), linear-gradient(rgba(20, 10, 4, .1), rgba(20, 10, 4, .65)); }
.mo-page { position: relative; max-width: 1180px; margin: 0 auto; padding: calc(18px + var(--sat)) calc(20px + var(--sar)) calc(28px + var(--sab)) calc(20px + var(--sal)); }

/* the top: back to town, the shout, a line */
.mo-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mo-back { display: inline-flex; align-items: center; gap: .4em; padding: .45em 1em; border: 2px solid var(--ink); border-radius: 6px; background: linear-gradient(#8f5f33, #63401e);
    color: var(--cream); font: 700 1rem Alegreya, Georgia, serif; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 220, 160, .35), 0 3px 0 var(--ink), 0 6px 14px rgba(0, 0, 0, .45); }
.mo-back:hover { filter: brightness(1.15); }
.mo-back img { height: 1.6em; width: auto; margin: -.3em 0; }
.mo-head { text-align: center; margin: 6px 0 26px; }
.mo-head h1 { margin: 0; font: 400 clamp(4rem, 16vw, 9.5rem)/.9 Bangers, Impact, sans-serif; letter-spacing: .04em; transform: rotate(-3deg);
    color: var(--gold); background: linear-gradient(#fff4d6 15%, #f2b84a 55%, #c4561e 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 3px #3a1a08; paint-order: stroke fill; filter: drop-shadow(0 5px 0 #3a1a08) drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); }
.mo-head p { margin: .5em auto 0; max-width: 34em; font: italic clamp(1.05rem, 2.2vw, 1.4rem) Alegreya, Georgia, serif; color: #fff4dc; text-shadow: 0 2px 6px #000; }

/* the posters */
.mo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 28px; }   /* (a short last row sits centred) */
.mo-card { position: relative; flex: 0 1 360px; min-width: 280px; display: flex; flex-direction: column; padding: 16px 16px 18px; border-radius: 3px; color: var(--ink); text-decoration: none;
    background: linear-gradient(#f5e7c4, #e3c995); box-shadow: 0 16px 34px rgba(0, 0, 0, .55), inset 0 0 50px rgba(120, 70, 20, .28);
    transform: rotate(var(--tilt, 0deg)); transition: transform .25s ease, box-shadow .25s ease; outline: none; }
.mo-card:nth-child(3n+1) { --tilt: -1.2deg; } .mo-card:nth-child(3n+2) { --tilt: .9deg; } .mo-card:nth-child(3n) { --tilt: -.5deg; }
.mo-card::before { content: ''; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;   /* the brass tack */
    background: radial-gradient(circle at 35% 35%, #ffe9a8, var(--brass) 45%, #7a5410); box-shadow: 0 3px 4px rgba(0, 0, 0, .55); }
.mo-card:hover, .mo-card:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.015); box-shadow: 0 26px 46px rgba(0, 0, 0, .65), inset 0 0 50px rgba(120, 70, 20, .28); }
.mo-card:focus-visible { box-shadow: 0 0 0 4px var(--gold), 0 26px 46px rgba(0, 0, 0, .65); }
.mo-kind { text-align: center; font: 400 .95rem Rye, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: #6b3a1a; margin-bottom: 8px; }
.mo-kind::before, .mo-kind::after { content: '\2605'; margin: 0 .6em; font-size: .7em; vertical-align: .2em; color: var(--red); }
.mo-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 3px solid var(--ink); background: #2a170b; box-shadow: inset 0 0 0 2px rgba(255, 230, 180, .25); }
.mo-art img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.12) contrast(1.03); transition: transform .5s ease; }
.mo-card:hover .mo-art img { transform: scale(1.05); }
.mo-art.contain img { object-fit: contain; padding: 8% 10%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.mo-card h2 { margin: 12px 0 2px; text-align: center; font: 400 clamp(1.6rem, 3vw, 2rem)/1.05 Rye, Georgia, serif; color: var(--ink); }
.mo-host-name { text-align: center; font: italic .95rem Alegreya, Georgia, serif; color: #7a4f2a; }
.mo-card p { margin: 10px 2px 14px; font-size: 1.06rem; line-height: 1.42; flex: 1; }
.mo-go { align-self: center; padding: .5em 1.4em; border: 2px solid var(--ink); border-radius: 6px; background: linear-gradient(#c8463a, #8e2219); color: var(--cream);
    font: 700 1.1rem Alegreya, Georgia, serif; letter-spacing: .02em; text-shadow: 0 1px 0 #3a0a04; box-shadow: inset 0 1px 0 rgba(255, 200, 170, .4), 0 3px 0 var(--ink); }
.mo-card:hover .mo-go { filter: brightness(1.12); }

.mo-foot { margin-top: 38px; text-align: center; font: italic 1rem Alegreya, Georgia, serif; color: #e9d6ac; text-shadow: 0 1px 4px #000; }
.mo-foot a { color: var(--gold); }

@media (max-width: 640px) {
    .mo-page { padding-left: calc(16px + var(--sal)); padding-right: calc(16px + var(--sar)); }
    .mo-grid { gap: 30px; }
    .mo-card { flex-basis: 100%; min-width: 0; }
    .mo-card { --tilt: 0deg !important; }
    .mo-back span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mo-card, .mo-art img { transition: none; } .mo-card:hover { transform: none; } }