@font-face {
    font-family: 'Bigshot One';
    src: url('fonts/BigshotOne-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Code Pro';
    src: url('fonts/SourceCodePro-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Alegreya';
    font-weight: 400;
    font-style: normal;
    src: url('fonts/Alegreya-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Alegreya Italic';
    font-weight: 600;
    font-style: normal;
    src: url('fonts/Alegreya-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Alegreya Semibold';
    font-weight: 600;
    font-style: normal;
    src: url('fonts/Alegreya-SemiBold.woff2') format('woff2'),
         url('fonts/Alegreya-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Alegreya Semibold Italic';
    font-weight: 600;
    font-style: normal;
    src: url('fonts/Alegreya-SemiBoldItalic.woff2') format('woff2'),
         url('fonts/Alegreya-SemiBoldItalic.woff') format('woff');
}

body {
    background: #000;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#wrapper {
    font-family: "Bigshot One", serif;
    font-style: normal;
    height: 100vh;
    margin: 0 auto;
    max-width: 900px;
    position: relative;
    width: 100%;
    z-index: 10;
}

/* Centered container so quote marks respect the 900px game width */
#quoteMarks {
    left: 50%;
    max-width: 900px;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    z-index: 2;
}

#openQ {
    background-image: url(images/openingQ.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: block;
    height: 200px;
    opacity: 0.24;
    position: absolute;
    left: calc((120px - 10%) * -1);
    top: 60px;
    width: 135px;
    z-index: 1;
}

#closeQ {
    background-image: url(images/closingQ.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: block;
    height: 200px;
    opacity: 0.24;
    position: absolute;
    right: calc((120px - 10%) * -1);;
    top: 90px;
    width: 135px;
    z-index: 1;
}

#biblio, #logline, #daily, #kickOff, #HTP {
    margin: 0;
    padding: 40px 0 0 0;
    text-align: center;
}

#biblio { opacity: 0.5; }

#biblio h1 {
    color: hsla(0 0% 100% / 1);
    font-size: 3rem;
    margin: 0;
    padding: 0;
}

#logline {
    opacity: 0.9;
}

.ll {
    color: hsla(0 0% 100% / 1);
    font-family: 'Alegreya Italic', serif;
    font-size: 1.6rem;
    margin: 0;
    padding-bottom: 20px;
}

#dateDifficulty {
    background-color: hsla(192 50% 30% / 0.8);
    border-radius: 8px;
    color: hsla(0 0% 100% / 1);
    display: block;
    margin: 0 auto;
    padding: 10px 0 12px;
    text-align: center;
    width: 200px;
}

.dayDate, .diffLabel {
    font-family: 'Source Code Pro', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.6;
    padding: 0;
}

.difficulty {
    font-family: 'Alegreya Semibold Italic', serif;
    font-size: 2.6rem;
    margin: 0;
    padding-top: 10px;
}

#kickOff {
    display: block;
    margin: 0 auto;
    padding-top: 30px;
    text-align: center;
    width: 100px;
}

.ko {
    background: hsla(0 0% 100% / 0.6);
    border-radius: 50%;
    color: #000;
    cursor: pointer;
    display: block;
    font-family: "Bigshot One", serif;
    font-size: 1.8rem;
    height: 100px;
    margin: 0;
    text-transform: uppercase;
    width: 100px;
}

.ko span {
    position: relative;
    top: 34px;
}

#HTP {
    cursor: pointer;
    padding: 60px 0 0 0;
}

#HowToPlay {
    display: block;
    margin: 0 auto;
    max-width: 600px;
    padding-top: 10px;
    width: 76%;
}

.htp {
    color: hsla(0 0% 100% / 0.8);
    font-family: 'Alegreya', serif;
    font-size: 1.6rem;
    margin: 0;
    padding-bottom: 20px;
}

.htpMeta, .htpHint, .htpData, .htpExit {
    font-family: 'Alegreya Italic', serif;
}
.htpMeta { color: hsla(275 100% 70% / 1); }
.htpHint { color: hsla(300 100% 60% / 1); }
.htpData { color: hsla(190 100% 50% / 1); }
.htpExit { color: hsla(360 100% 50% / 1); }

#startClues {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
}

.sClue {
    color: hsla(0 0% 87% / 1);
    display: inline-block;
    font-family: 'Source Code Pro', sans-serif;
    font-size: 1rem;
    font-style: normal;
    line-height: 0.8rem;
    margin-right: 1.4em;
    padding: 0;
    text-transform: uppercase;
}

#scoreFlag {
    background: hsla(0 0% 87% / 1);
    border-top: 1px solid hsla(0 0% 0% / 0.6);
    clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 100%,
        50% 80%,
        0% 100%
    );
    display: block;
    margin: 0;
    padding: .3em .6em 1.3em .6em;
    position: absolute;
    right: 10px;
    text-align: center;
    top: 0;
    z-index: 200;
}

#score {
    color: hsla(0 0% 0% / 1);
    font-family: "Bigshot One", serif;
    font-size: 2.2rem;
    margin: 0;
    padding: 0;
}

#quote {
    display: block;
    margin: 0;
    padding: 0 18%;
    text-align: center;
}

.qParts, .aParts, .tParts, .cParts {
    border-bottom: 1px solid hsla(0 0% 100% / 0.4);
    display: inline-block;
    margin: 0 1em .4em 0;
}

.default, .qWord, .aNonLast, .aLast {
    color: hsla(0 0% 94% / 1);
    font-family: 'Alegreya Semibold', serif;
    font-size: 2rem;
    margin: 0;
    padding: 0;
    position: relative;
    top: 24px;
    visibility: hidden;
}
.qWord { font-family: 'Alegreya Semibold Italic', serif; }
.aNonLast { color: hsla(0 0% 100% / 0.6); }

.qCount {
    color: hsla(0 0% 100% / 0.8);
    font-family: 'Source Code Pro', sans-serif;
    font-size: 1.1rem;
    font-style: italic;
    position: relative;
    bottom: -24px;
}

.qPunct {
    visibility: visible;
}

#guess {
    display: block;
    margin: 0 auto;
    max-width: 400px;
    padding-top: 100px;
    text-align: center;
    width: 60%;
}

form input {
    background: transparent;
    border-style: none;
    border-bottom: 2px solid hsla(0 0% 100% / 0.4);
    color: hsla(0 0% 100% / 1);
    font-family: 'Alegreya Italic', serif;
    font-size: 2.4rem;
    outline: none;
    text-align: center;
    width: 300px;
}

form input:focus {
    background: transparent;
    border-bottom: 2px solid hsla(0 0% 100% / 0.4);
    outline: none;
}

form button {
    background: hsla(0 0% 100% / 1);
    border: none;
    border-radius: 50%;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: 'Alegreya Semibold Italic', serif;
    font-size: 2.2rem;
    height: 50px;
    opacity:0.4;
    outline: none;
    width: 50px;
}

form button span {
    position: relative;
    top: -1px;
}

::placeholder {
    color: hsla(0 0% 100% / 0.3);
    font-size: 2rem;
}

.meta, .hint, .data, .exit, .mhMobile, .dxMobile {
    border: 2px solid hsla(0 0% 100% / 0.4);
    border-radius: 50%;
    cursor: pointer;
    display: block;
    height: 74px;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    top: 300px;
    width: 74px;
}
.data { top: 404px; }
.exit { border-radius: 0; top: 404px; }

.dxMobile { top: 380px; }
.mhMobile, .dxMobile { height: 54px; width: 54px; }
.l { left: 16px; }
.r { right: 16px; }
.rx { border-radius: 0; }

.sideBtn {
    color: hsla(275 100% 60% / 1);
    font-family: 'Alegreya Italic', serif;
    font-size: 2.2rem;
    margin: 0;
}
.small { padding-top: 3px; }
.normal { padding-top: 12px; }

.alt { color: hsla(300 100% 50% / 1); }
.altd { color: hsla(190 100% 50% / 1); }
.altx { color: hsla(360 100% 50% / 1); }

.metaOverlay {
    background: hsla(275 100% 40% / 1);
    clip-path: polygon(
        12% 0%,
        92% 0%,
        88% 100%,
        8% 100%
    );
    display: block;
    margin: 44px auto 0;
    max-width: 900px;
    min-height: 320px;
    position: relative;
    text-align: center;
    width: 100%;
}

.t { background: hsla(175 50% 35% / 1); }
.c { background: hsla(215 50% 40% / 1); }

.authOver, .titleOver, .charOver {
    font-size: 2rem;
    margin: 20px 0 0 0;
    padding: 0;
}

.pipe {
    margin: 0 0.4em;
    opacity: 0.25;
    position: relative;
    top: 2px;
}

#atc_left, #atc_right {
    display: block;
    height: auto;
    position: absolute;
    top: calc(50% - 40px);
}
#atc_left { left: 110px; }
#atc_right { right: 110px; }

.sideArrow {
    opacity: 0.5;
}
.Hflip {
    transform: scaleX(-1);
}

.dayPipe {
    opacity: 0.4;
    position: relative;
    top: -1px;
}

.off {
    display: none;
}

/* Revealed word — overrides the default visibility:hidden on .qWord, .default, etc. */
.revealed-word {
    visibility: visible !important;
}

/* Input shake on duplicate guess */
@keyframes shake {
    0%, 100% { transform: translateX(0);    }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px);  }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px);  }
}
.shake { animation: shake 0.35s ease; }

@media (max-width: 800px) {
    #wrapper { overflow-x: clip; }
    .qWord, .aNonLast, .aLast { font-size: 1.75rem; }
    .meta, .hint, .data, .exit { display: none; }
    #guess { padding-top: 50px; }
    form input { font-size: 2rem; width: 240px; }
}

@media (min-width: 800px) {
    #openQ { left: 0; }
    #closeQ { right: 0; }
    .mhMobile, .dxMobile { display: none; }
}

/* ===========================
   SPA STRUCTURE
   =========================== */

#app {
    position: relative;
    min-height: 100vh;
}

/* Screens */
.screen {
    display: none;
    font-family: "Bigshot One", serif;
    font-style: normal;
    margin: 0 auto;
    max-width: 900px;
    min-height: 100vh;
    opacity: 0;
    position: relative;
    width: 100%;
}

.screen.active {
    display: block;
    animation: screenFadeIn 0.4s ease forwards;
}

@keyframes screenFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* How to Play / Data back button */
#htpBack, #dataBack {
    padding: 30px 0 0 0;
    text-align: center;
    cursor: pointer;
}
#htpBack .ll, #dataBack .ll { font-size: 1.2rem; opacity: 0.5; }
#htpBack .ll:hover, #dataBack .ll:hover { opacity: 0.9; }

/* Data stub */
#dataStub {
    padding: 60px 0 0 0;
    text-align: center;
    opacity: 0.4;
}

/* ===========================
   OVERLAYS
   =========================== */

.overlay {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 50;
}

.overlay.active {
    display: block;
    animation: overlayFadeIn 0.3s ease forwards;
}

@keyframes overlayFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Close button (shared by meta and hint overlays) */
.metaClose {
    color: hsla(0 0% 100% / 0.5);
    cursor: pointer;
    font-family: 'Source Code Pro', sans-serif;
    font-size: 1.8rem;
    margin: 0;
    padding: 10px 0 14px 0;
    text-align: center;
}
.metaClose:hover { color: hsla(0 0% 100% / 0.9); }

/* Meta guess input inside overlay */
#metaGuess {
    display: block;
    margin: 0 auto;
    max-width: 400px;
    padding-top: 16px;
    text-align: center;
    width: 70%;
}

/* Meta reveal (word blanks inside the overlay) */
#metaReveal {
    display: block;
    margin: 0 auto;
    padding: 10px 0 0 0;
    text-align: center;
}

/* Meta nav arrows */
.metaArrow { cursor: pointer; }
.metaArrow img { opacity: 0.4; transition: opacity 0.2s; }
.metaArrow img:hover { opacity: 0.75; }

/* ===========================
   HINT OVERLAY
   =========================== */

.hintOverlay {
    background: hsla(300 60% 20% / 1);
    clip-path: polygon(12% 0%, 92% 0%, 88% 100%, 8% 100%);
    display: block;
    max-width: 900px;
    margin: 44px auto 0;
    min-height: 300px;
    padding: 20px 0 30px;
    text-align: center;
    width: 100%;
}

.hintTitle {
    color: hsla(0 0% 0% / 0.75);
    font-family: "Bigshot One", serif;
    font-size: 2rem;
    margin: 0 0 16px 0;
    padding: 0;
}

#hintTiers {
    display: flex;
    gap: 16px;
    justify-content: center;
    padding: 0 10%;
}

.hintTier {
    background: hsla(0 0% 0% / 0.2);
    border-radius: 8px;
    flex: 1;
    padding: 14px 12px;
    text-align: center;
}

.hintTierLabel {
    color: hsla(0 0% 100% / 0.9);
    font-family: 'Alegreya Semibold', serif;
    font-size: 1rem;
    margin: 0 0 8px 0;
}

.hintCost {
    color: hsla(300 100% 75% / 1);
    display: block;
    font-family: 'Source Code Pro', sans-serif;
    font-size: 0.85rem;
    margin-top: 2px;
}

.hintText {
    color: hsla(0 0% 100% / 0.6);
    font-family: 'Alegreya', serif;
    font-size: 1rem;
    margin: 0 0 12px 0;
    min-height: 60px;
}

.hintBtn {
    background: hsla(0 0% 100% / 0.15);
    border: 1px solid hsla(0 0% 100% / 0.3);
    border-radius: 4px;
    color: hsla(0 0% 100% / 0.8);
    cursor: pointer;
    font-family: 'Source Code Pro', sans-serif;
    font-size: 0.85rem;
    padding: 6px 12px;
    text-transform: uppercase;
    transition: background 0.2s;
}
.hintBtn:hover:not(:disabled) { background: hsla(0 0% 100% / 0.28); }
.hintBtn:disabled { cursor: not-allowed; opacity: 0.35; }

/* ===========================
   EXIT OVERLAY
   =========================== */

.exitOverlay {
    background: hsla(0 60% 20% / 1);
    clip-path: polygon(12% 0%, 92% 0%, 88% 100%, 8% 100%);
    display: block;
    max-width: 900px;
    margin: 44px auto 0;
    padding: 24px 0 32px;
    text-align: center;
    width: 100%;
}

.exitTitle {
    color: hsla(0 0% 100% / 0.9);
    font-family: 'Alegreya Semibold', serif;
    font-size: 1.8rem;
    margin: 0 0 10px 0;
}

.exitPreviewLabel {
    color: hsla(0 0% 100% / 0.6);
    font-family: 'Source Code Pro', sans-serif;
    font-size: 0.9rem;
    margin: 0;
    text-transform: uppercase;
}

.exitScore {
    color: hsla(360 100% 70% / 1);
    font-family: "Bigshot One", serif;
    font-size: 3.5rem;
    margin: 4px 0;
}

.exitPenaltyDetail {
    color: hsla(0 0% 100% / 0.45);
    font-family: 'Source Code Pro', sans-serif;
    font-size: 0.8rem;
    margin: 0 0 20px 0;
}

#exitActions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.exitBtn {
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Alegreya Italic', serif;
    font-size: 1.2rem;
    padding: 10px 24px;
    transition: opacity 0.2s;
}
.exitBtn:hover { opacity: 0.85; }

.exitConfirm {
    background: hsla(360 100% 50% / 0.8);
    color: #fff;
}

.exitReturn {
    background: hsla(0 0% 100% / 0.15);
    border: 1px solid hsla(0 0% 100% / 0.3);
    color: hsla(0 0% 100% / 0.9);
}

/* ===========================
   RESULT OVERLAY
   =========================== */

.resultOverlay {
    background: hsla(0 0% 8% / 0.97);
    border-top: 3px solid hsla(0 0% 100% / 0.15);
    display: block;
    min-height: 100vh;
    padding: 60px 10% 60px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.resultBiblio {
    color: hsla(0 0% 100% / 0.3);
    font-family: "Bigshot One", serif;
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    margin: 0 0 30px 0;
}

.resultTier {
    color: hsla(0 0% 100% / 0.5);
    font-family: 'Source Code Pro', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    margin: 0 0 6px 0;
    text-transform: uppercase;
}

.resultScore {
    color: hsla(0 0% 100% / 1);
    font-family: "Bigshot One", serif;
    font-size: 4.5rem;
    margin: 0 0 40px 0;
}

.resultScoreLabel {
    color: hsla(0 0% 100% / 0.35);
    font-family: 'Source Code Pro', sans-serif;
    font-size: 0.8rem;
    margin: -30px 0 40px 0;
    text-transform: uppercase;
}

.resultQuote {
    color: hsla(0 0% 100% / 0.9);
    font-family: 'Alegreya Semibold Italic', serif;
    font-size: 1.8rem;
    margin: 0 auto 16px;
    max-width: 600px;
}

.resultAttrib {
    color: hsla(0 0% 100% / 0.5);
    font-family: 'Alegreya Italic', serif;
    font-size: 1.2rem;
    margin: 0 0 30px 0;
}

.resultMetaItem {
    color: hsla(0 0% 100% / 0.4);
    font-family: 'Source Code Pro', sans-serif;
    font-size: 0.85rem;
    margin: 4px 0;
    text-transform: uppercase;
}
.resultMetaItem.solved { color: hsla(150 60% 60% / 1); }

.resultDoneBtn {
    background: hsla(0 0% 100% / 0.1);
    border: 1px solid hsla(0 0% 100% / 0.2);
    border-radius: 6px;
    color: hsla(0 0% 100% / 0.7);
    cursor: pointer;
    font-family: 'Alegreya Semibold', serif;
    font-size: 1.2rem;
    margin-top: 30px;
    padding: 10px 30px;
    transition: background 0.2s;
}
.resultDoneBtn:hover { background: hsla(0 0% 100% / 0.18); }

/* ===========================
   SCORE ANIMATION
   =========================== */

.scoreDelta {
    color: hsla(150 60% 60% / 1);
    font-family: 'Alegreya Semibold Italic', serif;
    font-size: 1.4rem;
    pointer-events: none;
    position: absolute;
    right: 14px;
    top: 60px;
    z-index: 200;
}
.scoreDelta.negative { color: hsla(360 80% 65% / 1); }

/* ===========================
   RESPONSIVE (additions)
   =========================== */

@media (max-width: 800px) {
    #hintTiers { flex-direction: column; padding: 0 8%; }
    .hintOverlay, .exitOverlay {
        clip-path: none;
        border-radius: 0 0 12px 12px;
    }
    .resultOverlay { padding: 40px 6% 40px; }
}