html, body { margin: 0; background: #111111; color: #eeeeee; font-family: system-ui, sans-serif; }

/*#instruct { position: fixed; left: 10px; top: 10px; }*/

/*canvas { display: block; margin: 0 auto; image-rendering: pixelated; }*/

#container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    width: 100%;
    /*max-width: 1200px;*/
    margin: 0 auto;
    gap: 12px;
}

#instruct {
    width: 25%;
    text-align: left;
    flex: 0 0 auto;
}

#caps {
    width: 55%;
    margin: 0;
    flex: 0 0 auto;
}

.legend {
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px solid #444;
    font-family: system-ui, sans-serif;
    font-size: 14px;
    color: #ddd;
}

.legend-row {
    display: flex;
    align-items: center;
    margin: 4px 0;
}

.legend-row .icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    border: 1px solid #222;
}

/* Color match the actual game objects */
.icon.player { background-color: #ff6b6b; }   /* red = player */
.icon.toy    { background-color: #aaaaaa; }   /* gray = toy */
.icon.envy   { background-color: #4B6F52; }   /* green-gray = toy */
.icon.lever  { background-color: #6bb9c7; }   /* cyan = lever */
.icon.exit   { background-color: #ffd54a; }   /* gold = exit */

#booklet-chooser { display:flex; gap:8px; flex-wrap:wrap }
.pill { padding:6px 12px; border:1px solid #444; border-radius:999px;
    background:#111; color:#ffd54a; cursor:pointer }
.pill[aria-selected="true"] { background:#ffd54a; color:#111; }

/* Manual drops below on its own row */
#manual { width: min(960px, 100%); }

#booklet-chooser { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; justify-content:center; }
.pill { padding:6px 12px; border:1px solid #444; border-radius:999px; background:#111; color:#ffd54a; cursor:pointer }
.pill[aria-selected="true"] { background:#ffd54a; color:#111; }

#flipbook { margin-top:10px; }
.fb-toolbar { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:8px; }
.fb-toolbar button { padding:4px 10px; border:1px solid #444; background:#111; color:#ffd54a; border-radius:6px; cursor:pointer; }
.fb-viewport {
    position: relative;

    /* Fit on screen without scrolling */
    height: min(96vh, 1200px);      /* cap by viewport height first, then by px */
    aspect-ratio: 2 / 3;           /* keeps your 1024x1536 ratio */
    width: auto;                    /* width derives from height via aspect-ratio */
    max-width: min(960px, 100%);    /* don’t overflow container on wide screens */
    margin: 0 auto;

    background: #0b0b0b;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    .spread { display:grid; grid-template-columns:1fr 1fr; gap:0; width:100%; height:100%; }

    /* keep pages fully visible inside the spread */
    .spread{ overflow:hidden; }

    /* a little cozy zoom for inner pages only */
    .page.tight{
        transform: scale(1.10);        /* ~10% bigger */
        transform-origin: center;
    }

    /* if the screen is short, disable the zoom so it never looks cramped */
    @media (max-height: 640px){
        .page.tight{ transform:none; }
    }
}

/* pages already have object-fit: contain, keep that */
.page { width: 100%; height: 100%; object-fit: contain; padding: 1%; box-sizing: border-box; background: #000; }

/* narrow screens = single page already handled by your media query */


.hotzone { position:absolute; top:0; bottom:0; width:48%; background:transparent; border:0; cursor:pointer; }
.hotzone.left  { left:0; }
.hotzone.right { right:0; }

/* small screens: single-page view feel */
/* Single-page (cover or narrow screens)
@media (max-width: 640px) {
    .spread { grid-template-columns: 1fr; }
}*/