* {
    box-sizing: border-box;
}

body {
    font-family: Helvetica Neue, Arial, sans-serif;
    /*font-size: 0.667em;*/
    font-size: 0.8em;
    background: transparent;
    margin: 0;
    padding: 0;
}

/* this ID doesn't exist after removing */
#gameContainer {
    /*border: solid blue 5px;*/
    background-color: transparent;
    /*font-size: 16px;*/
    font-size: 1.8vh;
    width: fit-content;
    padding-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1em;
}

#scratchpadDiv {
    padding-top: 2em;
    padding-left: 4em;
    margin-right: 1em;
    margin-bottom: 1em;
    float: clear;
}

#scratchpadDiv h4 {
    text-align: right;
    color: #AAAAAA;
}

#scratchpadDiv h4 a {
    text-decoration: none;
    color: #666666;
}

#scratchpad {
    display: none;
    padding: 1em;
    width: 24em;
    height: 36em;
    border-radius: 1em;
    border: solid black 2px;
    background-color: transparent;
}

#game {
    border: solid green 4px;
    color: #444444;
    background-color: transparent;
    display: inline-block;
    border: solid #111 0.5em;
    border-radius: 0.25em;
    margin: 2em;
}

table {
    border-collapse: collapse;
    border-radius: 3px;
}

th {
    background-color: transparent;
    border: solid #444444 2px;
    color: rgba(255,255,255,0.66);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

td {
    background-color: transparent;
}

th, td {
    width: 4em;
    height: 4em;
    padding: 0;
/*    position: relative; */
}
/*
.numberCircle adapted from: https://stackoverflow.com/a/19613616/6254147
*/
.numberCircle {
    width: 2em;
    line-height: 1em;
    border-radius: 50%;
    border: solid #F4F4EE 2px;
    text-align: center;
    background: white;
}
.noNumberCircle {
    width: 2em;
    line-height: 1em;
    background: black;
}

/* not doing anything */
.bigCircle {
    width: 12em;
    border-radius: 50%;
    border: solid #F4F4EE 2px;
    background: transparent;
}

.cell {
    border: none;
    /*
    border-right: solid black 1px;
    border-bottom: solid black 1px; */
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.gameCell {
    font-size: 1em;
    color: black;
    font-weight: bold;
/*    background-image: url("/images/diag.png");
    background-size: 100% auto;*/
/*    border-right: solid black 1px;
    border-bottom: solid black 1px;*/
    border-radius: 0;
    width: 4em;
    height: 4em;
    padding: 0;
    margin: 0;
}

.gameCell .rowSum {
    /*
    border-right: solid black 1px;
    border-bottom: solid black 1px;*/
    text-align: right;
    height: 1.9em;
    width: 1.9em;
    float: left;
    padding-top: 0.75em;
}

.gameCell .colSum {
/*    border-right: solid black 1px;
    border-bottom: solid black 1px; */
    text-align: right;
    height: 1.9em;
    width: 1.9em;
    float: left;
    padding-top: 0.75em;
}

.gameCell .diagonal {
    text-align: center;
    height: 1.9em;
    width: 1.9em;
    float: left;
}

.gameCell .noline {
    /* TODO FIX not overriding background-image in .cell -- why not? */
    background-color: transparent;
}

.playCell {
    border-right: solid black 1px;
    border-bottom: solid black 1px;
    position: relative;
    color: #444444;
    background-color: transparent;
    /* padding-top: 25%; */
    border-radius: 2px;
}
/*
.playCell .entry {
    position: absolute;
    left: 33%;
    top: 25%;
    z-index: -1;
    background-color: red;
}

.entryButton {
    position: absolute;
    left: 0.2em;
    top: 0.2em;
    background-color: rgba(255, 255, 245, 0.001);
    border: none;
    height: 1.6em;
    width: 1.6em;
    margin: 0;
    padding: 0;
    cursor: pointer;

    text-align: center;
    font-size: 2em;
}
*/
.entryPanel {
    /* border-radius: 5px; */
    background-color: transparent;
    border: none;
    text-align: center;
    position: absolute;
    left: 0.4em;
    top: 0.39em;
    font-size: 2em;
    padding: 0;
    margin: 0;
    width: 1.2em;
    height: 1.2em;
    z-index: 5;
    cursor: pointer;
}

.toggleButton {
    position: absolute;
    background: transparent;
    border: none !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
}

.game {
    background-color: black;
    color: white;
}

.play {
    background-color: white;
    color: black;
}

#gameFormDiv {
    text-align: right;
    margin: 1em;
    padding: 1em;
    border: solid black 2px;
    border-radius: 1em;
    background: transparent;
}

#gameFormDiv form input {
    width: 5em;
}


#solutionsDiv {
    color: white;
}





/*

review all styles

add classes to init-multigame as needed

bad layout 

margins

transforms not working

*/


/* TODO set these classes in game initialization 
 according to alignment of exterior borders */
    div.cell {
        /*border: none;*/
        background-color: transparent;
    }
    
    div.playCell {
        border: solid black 1px;
    }

    div.gameCell {
        background-color: transparent;
    }
    
    div.noline {
        /*border: none;*/
        background-color: transparent;
    }

    div.cell-top {
        border-top: solid black 1.5px;
        /* background-color: #EEE; */
    }
    
    div.cell-left {
        border-left: solid black 1.5px;
        /* background-color: #EEE; */
    }
    
    div.cell-right {
        border-right: solid black 1.5px;
        /* background-color: #EEE; */
    }
    
    div.cell-bottom {
        border-bottom: solid black 1.5px;
        /* background-color: #EEE; */
    }
    
    
    #gameSolverDiv {
        display: none;
    }


.game-grid-table {
    background: transparent;
}


.solution-td .game-div {
    background: transparent;
}

.solution-td .game-grid-table {
    background: transparent;
}

.solution-game-grid-table {
    background: transparent;
}


.solutions-td {
    background: transparent;
}


.cover-image {
    width: 5.0in; /* TODO add bleed */
    height: auto;
}

.cover {
    margin: 0;
    padding: 0;
}



/*
@media screen {}
@media print {
*/
    /* no background */
    /* simplify borders */
    /* paginate */
    /* alternate even/odd pages */
    /* show author or title in heading */
    /* show page number on left or right in footer */
/*    
[id^='solution_game_']{
    margin: 0;
    padding: 0;/*
    width: 4000px;
    height: 5200px;*/
    /*transform: scale(0.5);
    }*/

       
    
/* All pages — full 6x9 trim; header, page number and grid are absolutely placed so they
   reference the whole page (not a content box). */
    .page {
            display: block;
            position: relative;
            box-sizing: border-box;
            margin: 0;
            width: 6in;
            height: 9in;
            overflow: hidden;
            background: #fff;
            page-break-after: always;
        }

 


        .pages {
            page-break-after: always;
        }
    
        /* running head centred on the full trim, on a line 0.5in from the top */
        .page-header {
            position: absolute;
            top: 0.5in;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            text-align: center;
        }
        /* page number centred on a point 0.5in up and 0.5in in from the OUTER edge */
        .left-page-number, .right-page-number {
            position: absolute;
            bottom: 0.5in;
            width: auto;
            padding: 0;
            text-align: center;
        }
        .right-page-number { right: 0.5in; transform: translate(50%, 50%); }   /* recto/odd: outer = right */
        .left-page-number  { left: 0.5in;  transform: translate(-50%, 50%); }  /* verso/even: outer = left */

        

    /* Absolutely centre the grid on the page. The table box (6.75in) is wider than the
       visible heart (5.33in, offset 3.199in from the box's left), so left:-0.199in puts the
       heart centre on the page centre (3in). recto/verso nudge the heart toward the OUTER edge
       for the binding gutter. The heart is nearly page-wide (5.33in of 6in), so the outer
       margin can't go much below ~0.2in without clipping. verso (even/left) pages nudge a bit
       more (0.121in) than recto (0.08in) for extra right-side gutter at the spine.
       padding-top keeps the heart 1.75in below the box top. */
    .game-div {
        position: absolute;
        top: 0.351in;
        left: -0.199in;
        padding-top: 1.75in;
        padding-bottom: 1.25in;
        background: transparent;
    }
    .page.recto .game-div { left: -0.119in; }   /* nudge right: wider LEFT gutter  */
    .page.verso .game-div { left: -0.520in; }   /* nudge left:  wider RIGHT gutter (even pages have room — outer clue borders are hidden) */
     
    
    /* Solutions page content */
    .solution-number {
        font-size: 2em;
        margin: 0;
        margin-left: 0.25in;
        padding: 0;
    }

    .solutions-td {
        text-align: right;
        padding: 0;
    }

    .empty-cell {
        height: 100px; /* this gets adjusted to match other cells in main loop */
    }
    
    .solutions-table {
        font-size: 0.4em;
        margin: 1.1in auto 0;   /* clear the running head; centre 6-up solutions on the page */
    }

    /* Binding gutter for the 6-up solution pages. The table is auto-centred, so a
       translateX nudges it toward the OUTER edge without breaking the centring:
       recto (odd, right-hand) has its gutter on the LEFT → push right;
       verso (even, left-hand) has its gutter on the RIGHT → push left. */
    .page.recto .solutions-table { transform: translateX(0.25in); }
    .page.verso .solutions-table { transform: translateX(-0.18in); }


    .qr-image {
        width: 100px;
        height: auto;
    }

    /* Text-only pages */
    .text {
        font-size: 1.0em;
        padding: 0.75in;
    }

    /* Title page (and imprint) */
    .title {
        text-align: center;
        padding: 1.75in;
    } 

    /* Copyright page */
    .rights {
        text-align: left;
        padding: 1.0in;
    }

/* Order page */
    .order {
        text-align: center;
        padding: 1.0in;
        transform: translateX(-0.18in);   /* nudge left toward the outer edge for the binding gutter */
    }

    .order ul {
        text-align: left;
        padding-left: 0.5in;
    }


    /* Table of Contents */
    .toc {
        padding: 1.0in;
        margin-left: 0.5in;
    }

    .toc-table {
        width: 2.75in;
    }

    .toc-header {
        text-align: center;
    }

    .toc-title {
        font-weight: bold;
    }

    .toc-page-no {
        text-align: right;
    }

/* Lock the print page box to 6x9 so Playwright renders 1:1 (no scale-to-fit). Without this,
   the absolutely-positioned grid overflows and the whole page scales down, shifting the
   header and page numbers inward/up. html/body clipped so overflow never widens the sheet. */
@page { size: 6in 9in; margin: 0; }
html, body { width: 6in; margin: 0; padding: 0; overflow: hidden; }