/* Kindle optimized styles */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html,
body {
    height: 100%;
    background-color: white;
    color: black;
    font-family: sans-serif;
    line-height: 1.2;
    font-size: 14px;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    /* Best for E-ink */
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 10px;
    background: white;
}

header {
    display: block;
    position: relative;
    border-bottom: 2px solid black;
    padding-bottom: 5px;
    margin-bottom: 15px;
    height: 40px;
    /* Force height for absolute positioning of children */
    line-height: 40px;
}

.header-left {
    position: absolute;
    left: 0;
    top: 0;
}

.brand-text {
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 0.9em;
    color: #666;
    letter-spacing: 1px;
    margin: 0;
}

.header-right {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: baseline;
}

h1 {
    font-size: 1.2em;
    margin-bottom: 0px;
    text-align: right;
}

.lang-selector button {
    font-size: 12px;
    padding: 5px;
    margin-left: 5px;
    background: white;
    color: black;
    border: 2px solid black;
    cursor: pointer;
}

main {
    margin-top: 10px;
}

.game-list {
    list-style: none;
    margin-top: 10px;
}

.game-list li {
    margin-bottom: 15px;
}

.game-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: table;
    /* Fallback */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.game-list li {
    width: 31%;
    /* 3 per line with spacing */
    margin-bottom: 15px;
    display: inline-block;
    /* Fallback */
    vertical-align: top;
}

.game-card {
    text-decoration: none;
    color: black;
    display: block;
    padding: 10px 5px;
    border: 2px solid black;
    text-align: center;
    height: 100%;
    box-sizing: border-box;
}

.game-thumb {
    width: 70px;
    height: 70px;
    margin: 0 auto 5px auto;
    border: 1px solid #000;
    display: block;
}

.game-info {
    display: block;
}

.game-card h3 {
    margin: 2px 0;
    font-size: 14px;
    /* Smaller for grid */
    font-weight: bold;
}

.game-card p {
    margin: 0;
    font-size: 11px;
    /* Smaller for grid */
    color: #333;
    line-height: 1.1;
}

.detail-thumb {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px auto;
    border: 1px solid #000;
    display: block;
}

h1 {
    font-size: 1.5em;
    margin-bottom: 0px;
}

h2,
h3 {
    font-size: 14px;
    margin-bottom: 3px;
}

.btn {
    display: inline-block;
    padding: 5px 10px;
    font-size: 14px;
    background: white;
    color: black;
    border: 2px solid black;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

.clearfix {
    clear: both;
    display: block;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Modal specific */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    text-align: center;
    z-index: 1000;
}

.modal-content {
    border: 5px solid black;
    background: white;
    padding: 20px;
    margin: 40px auto;
    width: 280px;
}

.modal-content p {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Tic Tac Toe specific */
.board {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 273px;
    margin: 10px auto;
    background: black;
    border: 3px solid black;
    padding: 1px 0 0 1px;
}

.cell {
    float: left;
    width: 90px;
    height: 90px;
    margin: 0 1px 1px 0;
    background: white;
    text-align: center;
    line-height: 90px;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.scores {
    display: flex;
    justify-content: space-around;
    font-size: 16px;
    margin-bottom: 4px;
}

.controls {
    text-align: center;
    margin-top: 4px;
}

.controls .btn {
    margin: 2px;
}

.status-message {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    margin: 2px 0;
}

.mode-selector {
    display: flex;
    justify-content: center;
    gap: 15px;
    /* Increased from 10px */
    margin-bottom: 20px;
    /* Increased from 10px */
}

.mode-selector .btn {
    margin: 0;
    padding: 12px 20px;
    /* Make buttons physically larger for touch */
}

/* Memory specific */
.memory-board {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 440px;
    margin: 4px auto 10px auto;
}

.memory-card {
    float: left;
    width: 100px;
    height: 100px;
    margin: 5px;
    background: white;
    border: 3px solid black;
    text-align: center;
    line-height: 100px;
    font-size: 44px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.memory-card.hidden {
    background: black;
    color: black;
    /* Hide text */
}

.memory-card.matched {
    background: white;
    border-color: #888;
    color: #888;
    cursor: default;
}

/* Sudoku specific */
.sudoku-board {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 319px;
    margin: 10px auto;
    background: black;
    border: 3px solid black;
    padding: 1px 0 0 1px;
}

.sudoku-cell {
    float: left;
    width: 34px;
    height: 34px;
    margin-right: 1px;
    margin-bottom: 1px;
    background: white;
    text-align: center;
    line-height: 34px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

/* Thicker gaps for 3x3 blocks */
.sudoku-cell.border-right {
    margin-right: 3px;
}

.sudoku-cell.border-bottom {
    margin-bottom: 3px;
}

.sudoku-cell.selected {
    background: black;
    color: white;
}

.sudoku-cell.given {
    background: #ccc;
    cursor: default;
}

.sudoku-cell.error {
    color: white;
    background: black;
}

.numpad {
    width: 320px;
    margin: 10px auto;
    text-align: center;
}

.numpad .btn {
    float: left;
    width: 48px;
    height: 36px;
    margin: 6px;
    padding: 0;
    line-height: 36px;
    font-size: 18px;
}

.numpad .btn:last-child {
    width: 48px;
    font-size: 12px;
}

/* Battleship specific */
.battleship-board {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 310px;
    margin: 10px auto;
    background: black;
    border: 3px solid black;
    padding: 1px 0 0 1px;
}

.battleship-board.mini {
    width: 160px;
    margin: 0;
    float: left;
}

.battleship-board.mini .battleship-cell {
    width: 15px;
    height: 15px;
    line-height: 15px;
    font-size: 10px;
}

.battleship-cell {
    float: left;
    width: 30px;
    height: 30px;
    margin: 0 1px 1px 0;
    background: white;
    text-align: center;
    line-height: 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.battleship-cell.invalid-pos {
    background-color: white;
    background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 2px, #ccc 2px, #ccc 4px);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, #ccc 2px, #ccc 4px);
    color: #ccc;
    cursor: not-allowed;
}

.fleet-placement-container {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin: 10px auto;
}

.placement-sidebar {
    float: left;
    width: 140px;
    margin-right: 20px;
    text-align: center;
}

.ship-list {
    margin: 15px 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.ship-item {
    margin: 8px 0;
    padding: 5px 10px;
    border: 1px solid black;
    cursor: pointer;
    font-size: 14px;
}

.ship-item.selected {
    background: black;
    color: white;
}

.ship-item.placed {
    text-decoration: line-through;
    color: #888;
    border-color: #ccc;
}

.attack-area-container {
    width: 346px;
    margin: 0 auto;
}

.attack-side-title {
    float: left;
    width: 25px;
    height: 316px;
    position: relative;
    overflow: hidden;
}

.attack-side-title span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
    transform: translate(-50%, -50%) rotate(-90deg);
    white-space: nowrap;
    font-size: 15px;
    font-weight: bold;
    color: #000;
}

.game-bottom-row {
    width: 341px;
    margin: 0 auto;
    text-align: left;
}

.stats-sidebar {
    float: right;
    width: 130px;
    text-align: left;
    font-size: 14px;
    padding-top: 5px;
}

.stat-item {
    margin-bottom: 5px;
}

.battleship-cell.hit {
    background: white;
    color: black;
    font-weight: bold;
    font-size: 20px;
}

.battleship-cell.sunk {
    background: black;
    color: white;
}

.battleship-cell.ship-part {
    background: #999;
}

.battleship-cell.miss {
    color: #888;
    background: white;
}

/* Word Search specific */
.wordsearch-board {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    margin: 10px auto;
    background: black;
    border: 3px solid black;
    /* padding: top left. Bottom/Right are handled by cell margins */
    padding: 1px 0 0 1px;
}

.wordsearch-cell {
    float: left;
    width: 30px;
    height: 30px;
    margin: 0 1px 1px 0;
    background: white;
    text-align: center;
    line-height: 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.wordsearch-cell.found {
    background: black;
    color: white;
}

.wordsearch-list {
    text-align: center;
    margin-top: 10px;
    font-size: 16px;
}

.wordsearch-list span {
    display: inline-block;
    margin: 0 5px;
}

.wordsearch-list span.found-word {
    text-decoration: line-through;
    color: #888;
}

/* Hangman specific */
.hangman-drawing {
    width: 320px;
    height: 140px;
    margin: 10px auto;
    border: 2px solid black;
    font-family: monospace;
    font-size: 18px;
    white-space: pre;
    text-align: left;
    padding-top: 10px;
    padding-left: 110px;
}

.hangman-word {
    font-size: 28px;
    text-align: center;
    letter-spacing: 4px;
    margin: 15px 0;
    font-weight: bold;
}

.hangman-kb {
    width: 320px;
    margin: 0 auto;
    text-align: center;
}

.hangman-kb .btn {
    float: left;
    width: 35px;
    height: 35px;
    margin: 2px;
    padding: 0;
    line-height: 35px;
    font-size: 16px;
    font-weight: bold;
}

.hangman-kb .btn.used {
    background: #ccc;
    color: white;
    cursor: default;
    pointer-events: none;
}

/* Animation for victory */
@keyframes victory-flash {
    0% {
        background-color: white;
        color: black;
    }

    50% {
        background-color: black;
        color: white;
    }

    100% {
        background-color: white;
        color: black;
    }
}

.victory-flash {
    -webkit-animation: victory-flash 0.4s steps(2, start) 3;
    animation: victory-flash 0.4s steps(2, start) 3;
}

.block-completed {
    background-color: #ddd !important;
}

/* Connect 4 specific */
.connect4-board {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 294px;
    /* 7 cols * 42px each */
    margin: 10px auto;
    background: black;
    border: 3px solid black;
    padding: 1px 0 0 1px;
}

.connect4-cell {
    float: left;
    width: 40px;
    height: 40px;
    margin: 0 1px 1px 0;
    background: white;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    user-select: none;
}

.connect4-token {
    width: 32px;
    height: 32px;
    margin: 4px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background: transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.connect4-token.player1 {
    background: black;
    border-color: black;
}

.connect4-token.player2 {
    background: white;
    border-color: black;
    box-shadow: inset 0 0 0 2px black;
}

/* Dots and Boxes specific */
.dots-board {
    position: relative;
    background: white;
    -webkit-user-select: none;
    user-select: none;
    /* width and height are set explicitly by JS to avoid collapse */
}

.dot {
    position: absolute;
    background: black;
    z-index: 10;
}

.line {
    position: absolute;
    background: #e0e0e0;
    z-index: 5;
    cursor: pointer;
}

.line.placed {
    background: black;
    cursor: default;
}

.square-box {
    position: absolute;
    z-index: 1;
    display: table;
}

.square-content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}

.square-p1 { background: black; color: white; }
.square-p2 { background: #999; color: black; }
.square-p3 { background: #666; color: white; }
.square-p4 { background: white; color: black; border: 3px solid black; }

.player-score {
    display: inline-block;
    margin: 2px 4px;
    padding: 4px 8px;
    border: 1px solid black;
    font-size: 14px;
}

.player-active {
    background: black;
    color: white;
}

/* Mobile Responsive Zooming */
/* This targets modern smartphones with high DPI but small physical widths */
@media screen and (max-width: 500px) {
    .container {
        /* JS scale.js now handles dynamic scaling instead of this fixed 1.6 */
        /* transform: scale(1.6); */
        transform-origin: top center;
        /* margin-bottom: 60vh; */
    }

    header {
        margin-bottom: 20px;
    }

    /* Adjust game boards to fit the scaled container on narrow screens */
    /* Many games have internal board scaling that we should keep if they are still too big */
    .board,
    .memory-board,
    .sudoku-board,
    .battleship-board,
    .wordsearch-board,
    .hangman-kb {
        transform: scale(0.85);
        transform-origin: top center;
    }

    /* Buttons need to be even larger for big fingers */
    .btn,
    .game-card {
        padding: 15px;
        font-size: 16px;
    }

    body {
        overflow-x: hidden;
    }
}