/* The signed-out front page (views/nothangman-home.html). */

/* Display faces for the ransom headline, each subset to the headline's letters only. */
@font-face { font-family: 'R Abril'; src: url('/fonts/ransom-AbrilFatface.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'R Alfa'; src: url('/fonts/ransom-AlfaSlabOne.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'R Anton'; src: url('/fonts/ransom-Anton.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'R BlackOps'; src: url('/fonts/ransom-BlackOpsOne.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'R Bodoni'; src: url('/fonts/ransom-BodoniModa.woff2') format('woff2'); font-weight: 900; font-display: block; }
@font-face { font-family: 'R Bungee'; src: url('/fonts/ransom-Bungee.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'R Creepster'; src: url('/fonts/ransom-Creepster.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'R Oswald'; src: url('/fonts/ransom-Oswald.woff2') format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'R Playfair'; src: url('/fonts/ransom-PlayfairDisplay.woff2') format('woff2'); font-style: italic; font-weight: 900; font-display: block; }
@font-face { font-family: 'R Rubik'; src: url('/fonts/ransom-RubikMonoOne.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'R Shrikhand'; src: url('/fonts/ransom-Shrikhand.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'R Typewriter'; src: url('/fonts/ransom-SpecialElite.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'R Ultra'; src: url('/fonts/ransom-Ultra.woff2') format('woff2'); font-display: block; }

.home {
    --abril: 'R Abril', Georgia, serif;
    --alfa: 'R Alfa', Georgia, serif;
    --anton: 'R Anton', Impact, sans-serif;
    --blackops: 'R BlackOps', Impact, sans-serif;
    --bodoni: 'R Bodoni', Didot, serif;
    --bungee: 'R Bungee', Impact, sans-serif;
    --creepster: 'R Creepster', fantasy;
    --oswald: 'R Oswald', 'Arial Narrow', sans-serif;
    --playfair: 'R Playfair', Georgia, serif;
    --rubik: 'R Rubik', 'Arial Black', sans-serif;
    --shrikhand: 'R Shrikhand', Georgia, serif;
    --typewriter: 'R Typewriter', 'Courier New', monospace;
    --ultra: 'R Ultra', Georgia, serif;

    --hit: #759B67;          /* the game's correct-key green */
    --hitDark: #5d7f51;

    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.4rem, 2.2svh, 1.6rem);
    padding: clamp(0.75rem, 3svh, 2rem) 16px clamp(1.5rem, 5svh, 3rem);
    overflow: hidden;
    background: #ddd url('/NotHangman/image/PubDomain_FadedRock.jpg') center / cover;
}
.home::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0.35), rgba(30, 20, 40, 0.28));
    pointer-events: none;
}
.home > *, .homeAbout > * { position: relative; }

.srOnly {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.homeName {
    margin: 0;
    font: 700 clamp(1rem, 1.6vw, 1.35rem)/1 var(--mono);
    letter-spacing: 0.08em;
    color: #2a2520;
}

/* ---- the ransom headline -------------------------------------------------------------------- */
.ransom {
    margin: 0;
    font-size: clamp(2.1rem, min(4.6vw, 9svh), 5.6rem);
    line-height: 1;
    text-align: center;
}
.ransomLine {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.12em 0.42em;
    filter: drop-shadow(0.04em 0.06em 0.05em rgba(0, 0, 0, 0.45));
}
.ransomWord {
    display: inline-flex; align-items: center; gap: 0.03em; white-space: nowrap;
    transform: translateY(var(--wy, 0)) rotate(var(--wr, 0deg));   /* each word off the line on its own */
}
.cut {
    display: inline-block;
    font-family: var(--f);
    font-size: calc(var(--s, 1) * 1em);
    line-height: 1;
    padding: 0.1em 0.16em 0.12em;
    background-color: var(--bg);
    color: var(--ink);
    transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
}
/* Paper. Newsprint carries a faint halftone so it reads as cut from a page, not drawn. */
.paper  { --bg: #f3ecd9; --ink: #1d1a17;
          background-image: radial-gradient(rgba(0, 0, 0, 0.09) 0.6px, transparent 0.8px);
          background-size: 3px 3px; }
.black  { --bg: #161317; --ink: #f5f1e8; }
.purple { --bg: #57247a; --ink: #9be24a; }
.green  { --bg: #7cc242; --ink: #3b1453; }
.yellow { --bg: #f6d33c; --ink: #181512; }
.red    { --bg: #c42a2a; --ink: #fff6e0; }
/* Scissor edges: four irregular outlines so neighbouring cut-outs never match. */
.j1 { clip-path: polygon(2% 6%, 38% 0, 71% 4%, 99% 1%, 97% 42%, 100% 77%, 96% 100%, 58% 96%, 22% 100%, 0 95%, 3% 55%); }
.j2 { clip-path: polygon(0 3%, 46% 5%, 100% 0, 98% 36%, 95% 70%, 100% 97%, 64% 100%, 31% 95%, 4% 99%, 2% 60%); }
.j3 { clip-path: polygon(5% 0, 62% 3%, 96% 2%, 100% 51%, 97% 98%, 49% 95%, 0 100%, 3% 64%, 0 28%); }
.j4 { clip-path: polygon(0 0, 30% 4%, 100% 2%, 97% 30%, 100% 66%, 98% 100%, 40% 97%, 6% 100%, 0 70%, 4% 34%); }

/* ---- the games (NH-1033) --------------------------------------------------------------------- */
/* One card per game, each cut from the headline's paper; the whole card is the link. Three across
   where they fit, then one under another. */
.gameCards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: clamp(0.8rem, 2.4vw, 1.8rem);
    width: min(100%, 66rem);
}
.gameCard {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.55rem 0.8rem;
    background: #f3ecd9;
    color: #1d1a17;
    text-decoration: none;
    border: 2px solid #1d1a17;
    border-radius: 6px;
    box-shadow: 0 0.5rem 1.6rem rgba(20, 12, 30, 0.35), 0 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
    rotate: var(--r, 0deg);
    transition: scale 0.2s ease, rotate 0.2s ease;
    animation: dealIn 0.8s cubic-bezier(0.2, 0.8, 0.25, 1.15) backwards;
    animation-delay: var(--d, 0s);
}
.gameCards li:nth-child(1) .gameCard { --r: -1.5deg; }
.gameCards li:nth-child(2) .gameCard { --r: 1deg; --d: 0.09s; }
.gameCards li:nth-child(3) .gameCard { --r: -0.6deg; --d: 0.18s; }
.gameCard:hover, .gameCard:focus-visible { scale: 1.03; rotate: 0deg; }
.gameCard:focus-visible { outline: 3px solid #57247a; outline-offset: 4px; }
.gameCard img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    border: 1px solid #1d1a17;
    border-radius: 3px;
    background: #222;
}
.gameCardName { font: 700 clamp(1.1rem, 1.8vw, 1.45rem)/1.2 var(--mono); }
.gameCardLine { font-size: 0.95rem; line-height: 1.35; }
@keyframes dealIn {
    from { translate: 0 2rem; opacity: 0; }
}

/* ---- layout ----------------------------------------------------------------------------------- */
.home { min-height: max(calc(100svh - 3rem), 30rem); }
.homeAbout { display: contents; }

@media (orientation: portrait) {
    .ransom { font-size: clamp(1.5rem, min(8vw, 6svh), 3.6rem); }
}
/* Phones: the cards lie on their side, the picture beside the words. */
@media (max-width: 520px) {
    .home { gap: clamp(0.5rem, 1.6svh, 1rem); padding-top: clamp(0.5rem, 2svh, 1.2rem); }
    .ransom { font-size: clamp(1.35rem, min(7.6vw, 5svh), 2.4rem); }
    .gameCard { display: grid; grid-template-columns: 7.5rem 1fr; grid-template-rows: auto 1fr; column-gap: 0.7rem; row-gap: 0.15rem; padding: 0.45rem; }
    .gameCard img { grid-row: 1 / span 2; align-self: center; }
    .gameCardLine { font-size: 0.88rem; }
    .carousel { padding: 0 1.05rem; }
    .carousel-slides { font-size: 0.92rem; line-height: 1.35; }
    .carousel-slide { padding: 0.5rem 1.4rem 0.55rem; }
    .carousel-controls button { width: 2.1rem; height: 2.1rem; font-size: 1.05rem; }
}

/* ---- the words ------------------------------------------------------------------------------- */

/* The carousel (js/carousel.js). Each point is its own cut-out from the headline's papers, with
   back and next as two of the game's keys pinned to its middle left and right. */
.carousel {
    position: relative;
    box-sizing: border-box;
    width: min(100%, 60rem);
    padding: 0 1.4rem;
}
.carousel-slides {
    list-style: none;
    margin: 0;
    padding: 0;
    font: 700 clamp(0.82rem, min(1.2vw, 2svh), 1.08rem)/1.4 var(--mono);
    filter: drop-shadow(0.12rem 0.3rem 0.35rem rgba(20, 12, 30, 0.35));
}
.carousel-slide {
    padding: 0.6rem 1.8rem 0.7rem;
    background-color: var(--bg);
    color: var(--ink);
    clip-path: polygon(0 1%, 9% 0, 23% 1.4%, 41% 0.2%, 58% 1.1%, 77% 0, 92% 1.2%, 100% 0.4%, 99.3% 24%,
        100% 51%, 99.4% 78%, 100% 99%, 84% 100%, 66% 98.8%, 47% 100%, 29% 98.9%, 12% 100%, 0 99.2%,
        0.6% 73%, 0 47%, 0.7% 21%);
    rotate: calc(var(--r, 0deg) * 0.4);
}
.carousel-slide:nth-child(even) {
    clip-path: polygon(0.5% 0, 18% 1.2%, 35% 0, 54% 1.3%, 71% 0.3%, 88% 1.1%, 100% 0, 99.4% 30%,
        100% 62%, 99.2% 100%, 79% 98.9%, 60% 100%, 38% 99%, 20% 100%, 0 98.8%, 0.7% 64%, 0 33%);
}
.carousel-slide:nth-child(6n+1) { --bg: #f3ecd9; --ink: #1d1a17; --r: -1.2deg;
    background-image: radial-gradient(rgba(0, 0, 0, 0.07) 0.6px, transparent 0.8px); background-size: 3px 3px; }
.carousel-slide:nth-child(6n+2) { --bg: #f6d33c; --ink: #181512; --r: 1deg; }
.carousel-slide:nth-child(6n+3) { --bg: #57247a; --ink: #fff6e0; --r: -0.6deg; }
.carousel-slide:nth-child(6n+4) { --bg: #161317; --ink: #f5f1e8; --r: 1.4deg; }
.carousel-slide:nth-child(6n+5) { --bg: #7cc242; --ink: #2a0f3d; --r: -1.5deg; }
.carousel-slide:nth-child(6n+6) { --bg: #c42a2a; --ink: #fff6e0; --r: 0.7deg; }

/* Without the script every point shows, as a stack of cut-outs. */
.carousel:not(.is-ready) .carousel-slide + .carousel-slide { margin-top: 0.8rem; }
.carousel:not(.is-ready) .carousel-controls { display: none; }
/* With it, the points share one cell and each fills it, so the cut-out keeps the tallest
   point's height. */
.carousel.is-ready .carousel-slides { display: grid; }
.carousel.is-ready .carousel-slide { grid-area: 1 / 1; display: flex; align-items: center; visibility: hidden; }
.carousel.is-ready .carousel-slide.is-current { visibility: visible; }
.carousel-slide.from-right { animation: carouselInRight 0.45s ease both; }
.carousel-slide.from-left { animation: carouselInLeft 0.45s ease both; }
@keyframes carouselInRight { from { opacity: 0; transform: translateX(28px); } }
@keyframes carouselInLeft { from { opacity: 0; transform: translateX(-28px); } }

.carousel-controls button {
    position: absolute;
    top: 50%;
    z-index: 1;
    translate: 0 -50%;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid #8a8a8a;
    border-radius: 0;
    background: #f0f0f0;
    color: #1d1a17;
    font: 700 1.25rem/1 var(--mono);
    box-shadow: 0 0.15rem 0 #8a8a8a, 0 0.35rem 0.7rem rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
.carousel-prev { left: 0; rotate: -3deg; }
.carousel-next { right: 0; rotate: 3deg; }
.carousel-controls button:hover { background: #e0e0e0; }
.carousel-controls button:active { translate: 0 calc(-50% + 2px); box-shadow: 0 0 0 #8a8a8a, 0 0.2rem 0.4rem rgba(0, 0, 0, 0.25); }
.carousel-controls button:focus-visible { outline: 3px solid #57247a; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .gameCard { animation: none; transition: none; }
    .carousel-slide.from-right, .carousel-slide.from-left { animation: none; }
}