/* VARS ----------------------------------------------- */

    :root {
        /* standard named colours (all themes) */
        --colour-black: #000;
        --colour-white: #fff;
        --colour-red-back: #E81123;
        --colour-orange-back: #FF5613;
        --colour-amber-back: #FFB413;
        --colour-green-back: #83C832;
        --colour-blue-back: #4DBEFF;
        --colour-violet-back: #7B5DA7;
        --colour-hotpink-back: #FF277A;
        --colour-lt-grey-back: #F3F3F3;
        --colour-mid-grey-back: #757575;
        --colour-dk-grey-back: #343434;
        --colour-accent1: #002284; /* navy */
        --colour-current-clue: #0039DC;
        --colour-current-clue-bg: rgba(255,255,255,0.5);


        /* light theme (dark settings below, after :root block) */
        --colour-background: #fff;              /* std page background */
        --colour-foreground: var(--colour-accent1);           /* usually main body text */
        --colour-red-fore: #DA1020;
        --colour-orange-fore: #FF4C05;
        --colour-amber-fore: #C78800;
        --colour-green-fore: #679F28;
        --colour-blue-fore: #008BDB;
        --colour-violet-fore: #8167AD;
        --colour-hotpink-fore: #E60058;
        --colour-mid-grey-fore: #757575;
        /* copy and edit these for dark theme if required */

        --colour-link: #0040F0;
        --colour-link-hover: #003078;
        --colour-header-link: #ffffff;
        --colour-header-link-hover: #A7D6F0;
        --colour-header: var(--colour-accent1);
        --colour-footer-link: #ffffff;
        --colour-footer-link-hover: #BDE4FF;
        --colour-footer: var(--colour-accent1);

        /* other items */


        /* fonts, add font face css in next section */
        --body-font: 'Raleway', sans-serif;
        --headline-font: 'Raleway', sans-serif;
        --special-font: 'fontdiner swanky', sans-serif;
        --fontSize: 1.9rem;                             /* default font size for P */


        /* sizes */
        --theWidth: 1250px;                             /* width of widest content, also edit responsive section */
        --block-medium: 940px;                          /* med width block about 75% of theWidth */
        --block-narrow: 625px;                          /* narrow blocks (mainly for text) about 50% of theWidth */
        --gridGap: 30px;                                /* for grid gaps */
        --marginVert: 40px;                             /* for top/bot padding */
        --marginHoriz: 40px;                            /* for left/right padding */
        --headingGap: 15px;                             /* after headings */
        --textGap: 25px;                                /* after p, ul */

        --marginVertSmall: calc(var(--marginVert) / 2);
        --marginHorizSmall: calc(var(--marginHoriz) / 2);
        --marginVertBig: calc(var(--marginVert) * 2);
        --marginHorizBig: calc(var(--marginHoriz) * 2);
        --gridGapSmall: calc(var(--gridGap) / 2);
        --gridGapBig: calc(var(--gridGap) * 2);
    }


    /* dark theme */
    body[data-theme="dark"] {
        --colour-background: #141414;      /* page background */
        --colour-foreground: #F8F8F8;      /* usually text */
        --colour-red-fore: #EF2E3E;
        --colour-orange-fore: #FF5613;
        --colour-amber-fore: #FFB413;
        --colour-green-fore: #93D24B;
        --colour-blue-fore: #61C5FF;
        --colour-violet-fore: #AB99C7;
        --colour-hotpink-fore: #FF277A;
        --colour-mid-grey-fore: #8F8F8F;
        --colour-current-clue: #4DBEFF;
        --colour-current-clue-bg: rgba(0,0,0,0.5);
        --colour-link: #23A8E1;
        --colour-link-hover: #1A8CBC;
        
        background-image: url('../images/backg-dark.webp');
    }
    body[data-theme="dark"] main { background: rgba(0,0,0,0.5); }
    body[data-theme="dark"] .key { border: rgba(255,255,255,0.8); background: rgba(255,255,255,0.9); color: var(--colour-accent1); }
    body[data-theme="dark"] .key:not(.backspace):active { background: rgba(255,255,255,0.6); }
    body[data-theme="dark"] .backspace { background: rgba(255,255,255,0.7); }
    body[data-theme="dark"] .backspace svg path {stroke: var(--colour-accent1); }
    body[data-theme="dark"] .cell { border: inherit; }
    body[data-theme="dark"] .cell:after { color: white; }
    body[data-theme="dark"] .cell.highlight:after { color: black; }
    body[data-theme="dark"] .cell:not(.highlight):empty { background: none; border: 2px solid rgba(255,255,255,0.9); }
    body[data-theme="dark"] .tagline .icon-alarm { background: var(--colour-current-clue); }
    body[data-theme="dark"] .tagline .icon-alarm path { stroke: var(--colour-black); }
    body[data-theme="dark"] .tagline .icon-today path { stroke: var(--colour-white); }
    body[data-theme="dark"] .cell:not(:empty):after { color: var(--colour-black); }
    body[data-theme="dark"] #modal { background: var(--colour-accent1); color: var(--colour-white); }
    body[data-theme="dark"] #modal button { color: var(--colour-accent1); background: var(--colour-white); }
    body[data-theme="dark"] #modal button:hover { color: var(--colour-white); background: var(--colour-black); }
    body[data-theme="dark"] .modal-scroll::-webkit-scrollbar-track { background: var(--colour-accent1); }
    body[data-theme="dark"] .modal-scroll::-webkit-scrollbar-thumb { background: var(--colour-white); }
    body[data-theme="dark"] .modal-scroll { scrollbar-color: var(--colour-white) var(--colour-accent1); }
    body[data-theme="dark"] .modal-close path { fill: var(--colour-white); }


/* FONTS FOR THIS SITE -------------------------------- */


    @font-face {
      font-display: swap;
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/raleway/raleway-v36-latin-regular.woff2') format('woff2'); 
    }

    @font-face {
      font-display: swap;
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 500;
      src: url('../fonts/raleway/raleway-v36-latin-500.woff2') format('woff2'); 
    }

    @font-face {
      font-display: swap;
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 600;
      src: url('../fonts/raleway/raleway-v36-latin-600.woff2') format('woff2'); 
    }

    @font-face {
      font-display: swap;
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 700;
      src: url('../fonts/raleway/raleway-v36-latin-700.woff2') format('woff2'); 
    }


    @font-face {
      font-display: swap;
      font-family: 'Fontdiner Swanky';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/fontdiner/fontdiner-swanky-v24-latin-regular.woff2') format('woff2');
    }


/* COLOURS -------------------------------------------- */

	.c-black { color: var(--colour-black); }
    .c-white {color: var(--colour-white); }
    .c-background { color: var(--colour-background); }
    .c-foreground { color: var(--colour-foreground); }
    .c-red { color: var(--colour-red-fore); }
    .c-orange { color: var(--colour-orange-fore); }
    .c-amber { color: var(--colour-amber-fore); }
    .c-green { color: var(--colour-green-fore); }
    .c-blue { color: var(--colour-blue-fore); }
    .c-violet { color: var(--colour-violet-fore); }
    .c-hotpink { color: var(--colour-hotpink-fore); }
    .c-mid-grey { color: var(--colour-mid-grey-fore); }
    .c-accent1 { color: var(--colour-accent1); }
    .c-accent2 { color: var(--colour-accent2); }
    .c-accent3 { color: var(--colour-accent3); }

	.bg-black, .bull-black li:before { background-color: var(--colour-black); }
    .bg-white, .bull-white li:before {background-color: var(--colour-white); }
    .bg-background, .bull-background li:before { background-color: var(--colour-background); }
    .bg-foreground, .bull-foreground li:before { background-color: var(--colour-foreground); }
    .bg-red, .bull-red li:before { background-color: var(--colour-red-back); }
    .bg-orange, .bull-orange li:before { background-color: var(--colour-orange-back); }
    .bg-amber, .bull-amber li:before { background-color: var(--colour-amber-back); }
    .bg-green, .bull-green li:before { background-color: var(--colour-green-back); }
    .bg-blue, .bull-blue li:before { background-color: var(--colour-blue-back); }
    .bg-violet, .bull-violet li:before { background-color: var(--colour-violet-back); }
    .bg-hotpink, .bull-hotpink li:before { background-color: var(--colour-hotpink-back); }
    .bg-lt-grey { background-color: var(--colour-lt-grey-back); }
    .bg-mid-grey, .bull-mid-grey li:before { background-color: var(--colour-mid-grey-back); }
    .bg-dk-grey { background-color: var(--colour-dk-grey-back); }
    .bg-accent1, .bull-accent1 li:before { background-color: var(--colour-accent1); }
    .bg-accent2, .bull-accent2 li:before { background-color: var(--colour-accent2); }
    .bg-accent3, .bull-accent3 li:before { background-color: var(--colour-accent3); }

	.border-black { border-color: var(--colour-black); }
    .border-white { border-color: var(--colour-white); }
    .border-background { border-color: var(--colour-background); }
    .border-foreground { border-color: var(--colour-foreground); }
    .border-red { border-color: var(--colour-red-back); }
    .border-orange { border-color: var(--colour-orange-back); }
    .border-amber { border-color: var(--colour-amber-back); }
    .border-green { border-color: var(--colour-green-back); }
    .border-blue { border-color: var(--colour-blue-back); }
    .border-violet { border-color: var(--colour-violet-back); }
    .border-hotpink { border-color: var(--colour-hotpink-back); }
    .border-mid-grey { border-color: var(--colour-mid-grey-back); }
    .border-accent1 { border-color: var(--colour-accent1); }
    .border-accent2 { border-color: var(--colour-accent2); }
    .border-accent3 { border-color: var(--colour-accent3); }

    body { transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; }
    body { background: url('../images/backg-light.webp') no-repeat center center; background-size: cover; color: var(--colour-foreground); }


/* FIXES ---------------------------------------------- */

    header,
    .wide-block:after,
    .clearfix:after { content: ""; display: table; clear: both; }
     /* Correct 'block' display not defined in IE Firefox 3. */
    article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
        display: block;
    }

    /* Correct 'inline-block' display not defined in IE Firefox 3. */
    audio, canvas, video {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }


/* BASIC --------------------------------------------- */

    html, body { height: auto; width: 100%; }
    body { min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; -webkit-text-size-adjust: none; position: relative; }
    html { overflow-x: hidden; font-size: 62.5%; color: var(--colour-black); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    * { margin: 0px; padding: 0px; -webkit-tap-highlight-color: transparent; }

    html.freeze  { overflow: hidden; }
    html.freeze body { overflow: auto; }
		
/* Default Body Font and Text Colour */
    html, select, input, button { font-weight: 400; font-family: var(--body-font); }
    body, select, input, button { font-size: var(--fontSize); }

    select, input, textarea, li { color: inherit; }


/* HEADER --------------------------------------------- */

	header { position: relative; padding-top: 25px; padding-bottom: 25px; }
    header .inner-wrapper .main-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
    header .inner-wrapper .menu-inner { display: flex; justify-self: end; }


    /* centre logo in header full desktop menu below */
    header .inner-wrapper.full .main-row { flex-flow: row wrap; }
    header .inner-wrapper.full .logo-wrapper { flex: 0 100%; }
    header .inner-wrapper.full .menu-main-container { margin-right: auto; }
    

    /* centre logo in header (no desktop menu) */
    header .inner-wrapper.centred .logo-wrapper { margin-left: auto; margin-right: auto; }
    header .inner-wrapper.centred .menuicon { position: absolute; right: 0; }


    .logo-wrapper { width: auto; height: 55px; margin: 0; justify-self: center; }
    .logo-wrapper img { display: block; height: 100%; width: auto; margin: 0 auto; }

    .theme-icon { height: 20px; width: auto; margin-left: auto; cursor: pointer; stroke: none; fill: var(--colour-header-link); }
    .theme-icon:hover { fill: var(--colour-header-link-hover); }

    .tagline { margin: 0 0 var(--marginVert); display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;
    font-family: var(--special-font); font-size: 2.2rem; line-height: 1; font-weight: 500; letter-spacing: 0.05rem; text-align: center; }
    .tagline .icon-alarm { height: 100%; width: auto; transform: translate(8px, -6px); 
    background: var(--colour-accent1); border-radius: 50%; padding: 5px; width: 18px; height: 18px; cursor: pointer; display: none; }
	.icon-alarm.shake { animation: shake 0.5s linear forwards; }
	.tagline .icon-alarm.show { display: block; }
    .tagline .icon-alarm path { stroke: var(--colour-white); }
    .tagline .icon-today { width: auto; height: 30px; position: relative; top: -2px; margin-right: 11px; }
    .tagline .icon-today path { stroke: var(--colour-accent1); }
    .tagline .dateline { font-weight: 500; }
   
   

/* MAIN MENU ------------------------------------------ */

    /* main menu icon */
    .menuicon { display: flex; gap: 15px }
    .menuicon-wrapper { cursor: pointer; transition: all 0.33s ease; 
     display: flex; flex-flow: row nowrap; gap: 10px; align-items: center; }
    .menuicon-wrapper span { font-size: 1.5rem; font-weight:500; letter-spacing: 0.15rem; }
    .menuicon-wrapper .bars { position: relative; top: 0; width: 26px; height: 20px; display: flex; flex-flow: column wrap; justify-content: space-between; }
    .menuicon-wrapper .bar { width: 100%; height: 2px; transition: transform 0.25s linear; transform-origin: left; background-color: var(--colour-header-link); }
    .menuicon-wrapper .bar.mid { transition: opacity 0.2s linear; }
    .menuicon-wrapper { display: none; }
    .menuicon-wrapper:hover .bar { background-color: var(--colour-header-link-hover); }
    .menuicon-wrapper:hover span { color: var(--colour-header-link-hover); }


    /* main menu */
    .menu-main-container { margin-left: auto; transition: none; transform: none; }
    .menu-main,
    .menu-main li { list-style-type: none; margin: 0; padding: 0; }
    .menu-main { display: flex; flex-flow: row nowrap; gap: var(--gridGap); align-items: center; margin-right: var(--marginHoriz); }
    .menu-main li { font-size: 1.8rem; font-weight: 500; line-height: 1; }
    .menu-main li a { color: var(--colour-header-link); padding-bottom: 5px; }
    .menu-main li a[aria-current="page"],
    .menu-main li a:hover { color: var(--colour-header-link-hover); border-bottom: 2px solid; }

    li.social a svg { width: auto; height: 22px; fill: var(--colour-footer-link); }
    li.social a svg+span { text-indent: -9999px; }
    li.social a:hover svg { fill: var(--colour-header-link-hover); }
    ul li.social a { display: inline-flex; flex-flow: row nowrap; align-items: center; padding: 0; }
    li.social a[aria-current="page"],
    li.social a:hover { color: var(--colour-header-link-hover); border-bottom: none; }


    /* copy MOBILE MENU here for desktop */



/* FOOTER --------------------------------------------- */

	footer { position: relative; padding-top: var(--marginVert); padding-bottom: var(--marginVert); }
    footer .inner-wrapper { display: grid; grid-template-columns: minmax(260px,2fr) repeat(2,minmax(200px,1fr)); column-gap: var(--gridGap); }
    footer .footer-last-row { grid-column: 1 / 4; grid-row: 2 / 3; display: flex; flex-flow: row nowrap; justify-content: space-between; }
    footer .footer-last-row ul { display: flex; grid-gap: 20px; }
    footer p,
    footer ul,
    footer li { margin: 0; padding: 0; list-style-type: none; }

    footer p,
    footer li { font-size: 1.6rem; color: var(--colour-footer-link); }

    .logo-footer { margin: 0 0 var(--marginVertSmall); }
    footer ul { display: flex; flex-flow: column wrap; gap: 10px; }
    footer ul li a { display: inline-flex; flex-flow: row nowrap; align-items: center; }
    footer li a { color: var(--colour-footer-link); padding-bottom: 0; }
    footer li a[aria-current="page"],
    footer li a:hover { color: var(--colour-footer-link-hover); }
    footer .footer-last-row ul { flex-flow: row nowrap; }


/* OTHER ---------------------------------------------- */

    #modal-wrap,
    #overlay { position: fixed; inset: 0; flex-flow: column wrap; align-items: center; justify-content: center; transform: translateX(150vw); transition: transform 0.3s ease; display: flex; }
    
    #modal-wrap { transition: transform 0.5s ease; }
    #overlay { background: rgba(0,0,0,0.5); }

    #modal-wrap.show,
    #overlay.show { transform: translateX(0vw); }

    
    #modal { background: var(--colour-white)/* url('/images/modal-background.png') repeat-x*/; box-shadow: 0px 0px 20px rgba(255,255,255,0.9); width: clamp(300px, 85vw, 650px); max-height: 70vh; border-radius: 25px; padding: 20px 20px 30px; box-sizing: border-box; }
    .modal-open { cursor: pointer; }
    .modal-close { width: 30px; height: 30px; margin-bottom: 20px; align-self: flex-end; cursor: pointer; }
    .modal-inner { height: 100%; display: flex; flex-flow: column; }
    .modal-header { display: flex; flex-flow: row nowrap; justify-content: space-between; margin-bottom: 20px; }
    .modal-scroll { overflow-y: auto; width: 100%; height: 100%; padding-right: 20px; box-sizing: border-box; }
    .modal-scroll :last-child { margin-bottom: 0; }

    

    .toplink { position: fixed; bottom: 25px; right: 0; padding: 0; text-align: center; width: 38px; height: 38px;  transition: transform 0.5s ease-in; transform: translateX(100px); padding: 10px; box-sizing: border-box; border-radius: 50%; fill: #ffffff; background: rgba(0,0,0,0.5); }
    .toplink.show { transform: translateX(0); }
    .jump { cursor: pointer; }
    .toplink.show:hover { background: var(--colour-black); color: var(--colour-highlight-dk); }
    .toplink path { pointer-events: none; }    


/* HEADER + FOOTER RESPONSIVE ------------------------- */


@media only screen and (max-width: 1300px) {
    :root {
        --theWidth: 100%;
    }
    header, footer { padding-left: var(--marginHoriz); padding-right: var(--marginHoriz); }
}


@media only screen and (max-width : 1023px) {
    :root {
        --gridGap: 20px;
        --marginVert: 20px;
        --marginHoriz: 20px;
    }
    header { padding-top: var(--marginVert); padding-bottom: var(--marginVert); }
    .logo-wrapper { height: 40px; }
    footer p, footer li  {font-size: 1.6rem; }


    /* MOBILE MENU */
        .menushow #overlay.show { display: block; }
        .menuicon { margin-left: auto; }
        .menuicon-wrapper { display: flex; }
        .menu-main-container { position: fixed; z-index: 1000; height: 100%; background: linear-gradient(to bottom, var(--colour-accent1), var(--colour-black));  box-sizing: border-box; width: 270px; top: 0; right: calc(0px - 300px - var(--marginVert)); padding: var(--marginVert); padding-top: calc(var(--marginVertBig) * 1.5); transform: translateX(100%); transition: transform 0.33s ease-in-out; box-sizing: border-box; }
        .menu-main { height: 100%; flex-flow: column nowrap; overflow-y: auto; padding: 20px 0; box-sizing: border-box; gap: calc(var(--gridGap) * 1.2); align-items: flex-start; }
        .menu-main li { font-size: 2.0rem; }
        li.social a svg+span { text-indent: 0; padding-left: 10px; }
        
        /* main menu visible */

        .menushow .bar.top { transform: rotate(45deg); }
        .menushow .bar.bot { transform: rotate(-45deg); }
        .menushow .bar.mid { opacity: 0; }
        .menushow .menuicon { z-index: 1000; }
        .menushow .menu-main-container { transform: translateX(calc(0% - 300px - var(--marginHoriz))); }
    /* MOBILE MENU */
    
    
    footer { padding-top: var(--marginVertBig); padding-bottom: var(--marginVertBig); }
    .toplink { bottom: 105px; }
}


@media only screen and (max-width : 767px) {
    header .inner-wrapper .main-row { grid-template-columns: auto 1fr; }
    header .inner-wrapper .spacer { display: none; }
    footer .inner-wrapper { grid-template-columns: repeat(2, 1fr); }
    footer .footer-socials { grid-row: 2 / 3; grid-column: 2 / 4; }
    footer .footer-last-row { grid-row: 3 / 3; }
    footer ul { flex-flow: row wrap; column-gap: 20px; }
    footer li a svg { position: static; width: 25px; height: 25px; }
    footer li a svg+span { display: none; }
}


@media only screen and (max-width : 599px) {
    :root {
        --fontSize: 1.8rem;
    }
    header { padding-top: 17px; padding-bottom: 17px; }
    .logo-wrapper { height: 34px; }
    .menuicon-wrapper span { display: none; }
    footer .inner-wrapper { display: flex; flex-flow: column wrap; }
    /*footer .footer-links ul { flex-flow: column wrap; }*/
    footer .footer-last-row { flex-flow: column wrap; gap: 10px; }
    footer li a svg { position: static; width: 30px; height: 30px; }    
    .toplink { bottom: 48px; }
}


@media only screen and (max-width : 374px) {

}















/* TEXT + LINKS ---------------------------------------- */

    h1, h2, h3, h4, h5, h6 { font-family: var(--headline-font); font-weight: 600; line-height: 120%; -webkit-text-size-adjust: none; margin-bottom: var(--headingGap); }

    h1 { font-size: 4.0rem; }
	h2 { font-size: 3.6rem; }
	h3 { font-size: 3.2rem; }
    h4 { font-size: 2.75rem; }
    h5 { font-size: 2.3rem; }
    h6 { font-size: 2.0rem; }


    p, li, th, td, label, address, cite, select { line-height: 1.5em; margin-bottom: var(--textGap); }
    strong { font-weight: 600; }
    b { font-weight: 600; }

    .not-mobile { }
    .not-desktop { display: none; }

    /* links*/
    a { color: var(--colour-link); text-decoration: none; }
    main a:not(.button) { text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 0.25rem; font-weight: 600; }
    a:hover { color: var(--colour-link-hover); }
    a img { border: none; }

    button:not(.key) { border: none; background: var(--colour-accent1); color: var(--colour-white); padding: 10px 20px; margin: 0 auto var(--textGap); text-align: center; font-weight: 600; cursor: pointer; text-transform: uppercase; }
    button:not(.key):hover { background: var(--colour-black); }
    

/* LISTS --------------------------------------- */

    ul { list-style-type: disc;	}
    ul, ol { margin-bottom: var(--textGap); }
	li { margin: 0 0 0 25px; }


/* IMAGES AND BACKGROUNDS ----------------------------- */


/* CONTAINERS + SPACING ------------------------------- */


    main.page-content { flex: 1; padding: var(--marginVert) 0; background: rgba(255,255,255,0.75); 
    display: flex; flex-flow: column wrap; justify-content: center; padding-left: 0; padding-right: 0; 
    }
    
    .inner-wrapper { width: var(--theWidth); box-sizing: border-box; margin: 0 auto; position: relative; }

    .block { margin-bottom: var(--marginVert); }
    .width-large { width: var(--theWidth); }
    .width-medium { width: var(--block-medium); }
    .width-narrow { width: var(--block-narrow); }
    .centre-this { text-align: center; }
    .horiz-centre { margin-left: auto; margin-right: auto; }

    .margin-top { margin-top: var(--marginVert); }
    .margin-bot { margin-bottom: var(--marginVert); }
    .margin-top-small { margin-top: calc(var(--marginVert) / 2); }
    .margin-bot-small { margin-bottom: calc(var(--marginVert) / 2); }
    .margin-top-big { margin-top: calc(var(--marginVert) * 2); }
    .margin-bot-big { margin-bottom: calc(var(--marginVert) * 2); }
    .mt0 { margin-top: 0 !important; }
    .mb0 { margin-bottom: 0 !important; }

    .pad-top { padding-top: var(--marginVert); }
    .pad-bot { padding-bottom: var(--marginVert); }
    .pad-top-small { padding-top: calc(var(--marginVert) / 2); }
    .pad-bot-small { padding-bottom: calc(var(--marginVert) / 2); }
    .pad-top-big { padding-top: calc(var(--marginVert) * 2); }
    .pad-bot-big { padding-bottom: calc(var(--marginVert) * 2); }
    .pad-top0 { padding-top: 0 !important; }
    .pad-bot0 { padding-bottom: 0 !important; }


/* GAME ------------------------------------------------ */

    .game-area { display: flex; flex-flow: column nowrap; }
    .game-inner { display: flex; flex-flow: row nowrap; align-items: center; gap: var(--marginVert); width: max-content; max-width: var(--theWidth); margin: 0 auto; }
    .title,
    .messages { width: 100%; text-align: center; padding: var(--marginVertSmall) 0; }
    .title { margin-bottom: var(--marginVert); background: var(--colour-mid-grey-back); color: var(--colour-white); }
    .messages,
    .title p { margin: 0; }
    .message { }


    /* win effects */
    #winEffect  { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    #winEffect.hide  { display: none; }
    
    

/* GRID ------------------------------------------------ */

	#grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 5px; margin: auto 0; width: max-content; }
	
	.cell {
		/*width: 60px; height: 60px;*/width: auto; height: clamp(50px, 7.0vh, 90px); aspect-ratio: 1 / 1;
		border: 2px solid var(--colour-accent1); border-radius: 4px;
		background: rgba(255,255,255,0.9); color: var(--colour-black);
        font-size: clamp(3.0rem, 4.25vh, 4.5rem); font-weight: 600;
		cursor: pointer; display: flex; top: 6px; box-sizing: border-box; 
        align-items: center; justify-content: center; position: relative;
        transition: background-color 0.33s ease-in-out, transform 0.66s ease-in-out;
        transform: scale(0,1);
    }
    #grid.show .cell { transform: scale(1,1); }
    .cell:empty { background: none; }
	.cell.correct { background: #a8e6a2; }
	.cell.incorrect { background: #ff9a9a; }
	.cell.highlight { background: #A7D6F0; }
	.cell.active { background: #4DBEFF; }    
	.cell::after {
		content: attr(data-number);
		position: absolute; top: 2px; left: 2px;
		line-height: 100%; font-size: 1.4rem; font-weight: 500;
		color: var(--colour-black);
	}
	
	
/* CLUES ----------------------------------------------- */
	
	.clues { display: flex; justify-content: center; align-self: center; gap: var(--marginVert); }
	.clue-list { margin: 0; text-align: left; max-width: 300px; opacity: 0; transition: opacity 0.66s 0.33s ease-in-out; }
    .clues.show .clue-list { opacity: 1; }
    .clue-list.hide { display: none; }
	.clue-list h5 { font-family: var(--special-font); margin-bottom: var(--textGap); }
    .clue-list h5 span { /*border-bottom: 3px solid;*/ font-weight: 500; }
    .clue-list p { margin: 0 0 12px; font-weight: 500; }
    .clue-list p:last-of-type { margin: 0; }
    .clue-list p.current { color: var(--colour-current-clue); }


/* KEYBOARD -------------------------------------------- */

	#keyboard { display: flex; flex-direction: column; align-items: center; /*opacity: 0; transition: opacity 0.66s 0.44s ease-in-out;*/ margin: calc(var(--marginVert)*1.25) 0 0; gap: 8px; }
    #keyboard.show .key { opacity: 1;  }
	.key-row { display: flex; justify-content: center; gap: 6px; }
	.key { touch-action: manipulation; opacity: 0; transition: opacity 0.66s 0.44s ease-in-out;
		width: clamp(28px, 8.3vw, 50px); height: clamp(41px, 4.5vh, 50px); font-size: 2.0rem; font-weight: 600; line-height: 1;
		background: var(--colour-accent1); color: var(--colour-white); border-radius: 4px; border: none; cursor: pointer;
	}
    .key:nth-child(5) { transition-delay: 0.05s; }
    .key:nth-child(4),
    .key:nth-child(6) { transition-delay: 0.1s; }
    .key:nth-child(3),
    .key:nth-child(7) { transition-delay: 0.15s; }
    .key:nth-child(2),
    .key:nth-child(8) { transition-delay: 0.20s; }
    .key:nth-child(1),
    .key:nth-child(9) { transition-delay: 0.25s; }
    .key:nth-child(10) { transition-delay: 0.3s; }
    
    .key:not(.backspace):active { background-color: #00144C; }
	.backspace { background: var(--colour-black); width: clamp(40px, 9vw, 55px); }
    .backspace svg { width: 66%; height: auto; }
    .keyDown { position: relative; transform: translateY(1px); }
}


/* ANIMATIONS ----------------------------------------- */

    .swiper-button.swiper-next { animation: arrowPulseRight 0.5s ease infinite alternate; }
    @keyframes arrowPulseRight {
        0% { transform: translateX(0); }
        100% { transform: translateX(5px); }
    }

	@keyframes shake {
		0%   { transform: translate(8px, -6px); }
		10%  { transform: translate(4px, -6px); }
		20%  { transform: translate(8px, -6px); }
		30%  { transform: translate(4px, -6px); }
		40%  { transform: translate(8px, -6px); }
		50%  { transform: translate(4px, -6px); }
		60%  { transform: translate(8px, -6px); }
		70%  { transform: translate(4px, -6px); }
		80%  { transform: translate(8px, -6px); }
		90%  { transform: translate(4px, -6px); }
		100% { transform: translate(8px, -6px); }
	}







/* RESPONSIVE ----------------------------------------- */


@media only screen and (max-width : 1300px) {
    main .inner-wrapper { padding-left: var(--marginHoriz); padding-right: var(--marginHoriz); }

    h1 { font-size: 3.6rem; }
	h2 { font-size: 3.2rem; }
	h3 { font-size: 2.8rem; }
    h4 { font-size: 2.6rem; }
    h5,
    .tagline { font-size: 2.3rem; }
    h6 { font-size: 2.0rem; }
}

@media only screen and (max-width : 1023px) {
    .block { margin-bottom: var(--marginVertBig); }
        
    h1 { font-size: 3.3rem; }
	h2 { font-size: 2.8rem; }
	h3 { font-size: 2.6rem; }
    h4 { font-size: 2.3rem; }
    h5,
	.tagline { font-size: 2.1rem; }
    h6 { font-size: 2.0rem; }
	
	.tagline span { border: none; }
}


@media only screen and (max-width : 767px) {
    .tagline span { font-size: 2.0rem; }
}


@media only screen and (max-width : 499px) {
    .cell { height: clamp(56px, 5.0vh, 70px); }
    .clue-list p { font-size: 1.9rem; }
    .tagline { margin-bottom: 15px; }
    .key-row { gap: 4px; }
    .key { width: clamp(28px, 8.9vw, 50px); height: clamp(44px, 4.5vh, 50px); }
}
	
@media (orientation: portrait) {
    .clue-list p { display: none; } /* Hide all clues by default in portrait mode */
    .clue-list p.active { display: flex; flex-flow: row nowrap; align-items: center; } /* Only show the active clue */
	h5 { display: none; }
    .game-inner { flex-flow: column wrap; }
    .clue-list { max-width: none; }
    .clue-list p { margin: 0; }
    .clue-list p.current { }
    .clue-list p.active { /*min-height: calc(1em * 1.5 * 2);*/ text-align: center; color: var(--colour-accent1); }
	body[data-theme="dark"] .clue-list p.active { color: var(--colour-white); }
}