body {
    font-family: Arial, Helvetica, sans-serif;
    overflow-y: scroll;
    background-attachment: fixed;
    /* playercore.js explicitly recomputes and sets scroll position itself on
       every relevant DOM change (new turn, picture frame resizing — see
       scrollToTurnStart()/setPanelHeight() in playercore.js), including
       content inserted above the current scroll position (the sticky
       picture frame growing once its image loads). Chrome's default scroll
       anchoring tries to do the same job automatically to avoid a visual
       jump, but its guess and playercore.js's own (more informed) target
       can disagree — and since anchoring applies *before* playercore.js's
       own correction runs, its adjustment becomes the new "current scroll
       position" that scrollToTurnStart()'s never-scroll-backward guard then
       treats as intentional, silently defeating the real correction.
       Disabling it leaves scroll positioning entirely to our own logic. */
    overflow-anchor: none;
}

html,
body {
    margin: 0px;
    height: 100%;
}

a.cmdlink {
    text-decoration: underline;
    color: Blue;
    cursor: pointer;
}

a.cmdlink.disabled {
    text-decoration: inherit;
    color: inherit !important;
    cursor: inherit;
}

div#gameBorder {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid silver;
    border-right: 1px solid silver;
    margin-top: 0;
    min-height: 100%;
}

div#gamePanel {
    position: sticky;
    top: 32px;
    padding-top: 2px;
    text-align: center;
    display: none;
}

div#gridPanel {
    position: sticky;
    top: 32px;
    padding: 0;
    overflow: hidden;
    display: none;
}

div#gameContent {
    padding: 30px 20px 0px 20px;
    min-height: 100%;
}

div#gamePanes {
    position: fixed;
    float: right;
    width: 216px;
    top: 24px;
    padding: 2px;
    background: #F9F9FF;
    min-height: 100%;
    display: none;
    left: 50%;
    margin-left: 255px;
}

div#qv-status {
    /* A border-box total (box-sizing below): 30px of bar plus
       .ui-widget-header's 1px border top and bottom. */
    height: 32px;
    position: fixed;
    top: 0px;
    z-index: 100;
    /* Anchored to the viewport rather than left to its static position inside
       #gameBorder. It's position: fixed, so a plain "width: 100%" resolved
       against the viewport while the bar still started at #gameBorder's 1px
       left border - and with .ui-widget-header's own 1px borders sitting
       outside a content-box width, the bar overran the window by 3px and
       clipped its rightmost button on a phone. left/right/margin: auto centres
       it on the viewport instead, which is where #gameBorder centres too, so
       the wide layout is unchanged. */
    left: 0;
    right: 0;
    width: auto;
    /* A border-box total, matching #gameBorder's content width - see
       setGameWidth() in playercore.js, which caps this at runtime. */
    box-sizing: border-box;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    font-size: 14pt;
    padding: 0;
    display: none;
}

div#location {
    display: none;
    padding-left: 4px;
    padding-top: 4px;
}

div#controlButtons {
    float: right;
}

.hiddenbutton {
    display: none;
}

#dialog {
    display: none;
}

/* showMenu() opens the menu dialog with width: "auto" so that long options
   aren't clipped, so it's the options themselves that decide how wide the
   dialog gets. Keep that within the window, keep a long caption wrapping
   instead of stretching the dialog out on its own, and let the options list
   shrink rather than overflow once the cap is reached. */
.ui-dialog {
    max-width: 95vw;
}

#dialogCaption {
    max-width: 60ch;
}

#dialogOptions {
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#msgbox {
    display: none;
}

.compassbutton {
    margin-right: 0;
    height: 35px;
    width: 35px;
}

#statusVars {
    padding: 4px;
    max-height: 140px;
}

#gamePanesFinished {
    display: none;
}

#cmdSave {
    margin-top: 0px;
}

div#divOutput {
    margin-top: 20px;
    min-height: 100%;
}

div#txtCommandDiv {
    height: 40px;
    display: none;
}

div#txtCommandContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#txtCommand {
    font-size: 20px;
    vertical-align: bottom;
    padding: 6px;
    flex-grow: 1;
    /* Reset the browser's native inset/bevel text-field chrome (most visible
       as a chunky border in Safari, but present — just subtler — everywhere)
       with a flat, single-tone border instead. */
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #999;
    border-radius: 3px;
    outline: none;
}

#txtCommand:focus {
    border-color: #4a90d9;
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.25);
}

#txtCommandSpacer {
    height: 10px;
}

div#controlButtons .ui-button {
    font-size: 10px !important;
}

.verbButtons {
    text-align: center;
}

.verbButtons .ui-button {
    font-size: 10px !important;
    margin: 5px;
}

#compassTable .ui-button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px !important;
    border: 2px solid #C5DBEC;
}

#compassTable .ui-button-disabled {
    border: 1px solid #C5DBEC;
    background: inherit;
}

.ui-accordion .ui-accordion-content {
    padding: 0;
}

.ui-accordion-header {
    font-size: 12px;
    margin-top: 10px !important;
}

h3 .ui-icon {
    position: absolute;
}

h3 .accordion-header-text {
    padding-left: 1.8em;
}

button.accordion-header-text {
    display: block;
    width: 100%;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

#gamePanes .ui-widget {
    font-size: 12px;
}

#endWaitLink {
    font-size: 16px;
    font-weight: bold;
}

.ui-selecting {
    background: #FECA40;
}

.ui-selected {
    background: #F39814;
    color: white;
}

.elementListWrapper {
    max-height: 200px;
    overflow-y: scroll;
}

.elementList {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.elementList li {
    padding: 3px;
    cursor: default;
}

div#gamePanel img {
    max-width: 100%;
}

div#divOutput img,
div#divOutput video,
div#divOutput iframe {
    max-width: 100%;
}

/* An iframe has a border by default, which would otherwise take it past the text width */
div#divOutput video,
div#divOutput iframe {
    box-sizing: border-box;
}

div.jjmenu {
    font-size: 12px;
    position: absolute;
    background: #fffef0;
    border-bottom: 2px solid gray;
    border-right: 1px solid gray;
    padding: 0px;
}

div.jj_menu_item {
    color: black;
    border: 1px solid gray;
    border-bottom: none;
    background: white;
    cursor: pointer;
}

div.jj_menu_item span {
    display: block;
    padding: 4px;
}

div.jj_menu_item_hover {
    background: #e4e4e4;
}

#cmdShowPanes {
    display: none;
}

#sidebar {
    display: none;
    position: fixed; /* fixed position to overlay content */
    top: 32px;
    right: 0;
    width: 220px;
    height: 100%;
    /*background: #fff;*/
    z-index: 1000;
    overflow-y: auto;
    /*box-shadow: -2px 0 5px rgba(0,0,0,0.5);*/
    padding: 10px;
}

#cmdShowPanes {
    display: none;
}

/* ---------------------------------------------------------------------------
   Narrow-window (phone/tablet) sizing - see issue #2181.

   doLayout() in playercore.js owns the single narrow/wide threshold (the
   window is narrower than the game width, so the panes have collapsed behind
   the hamburger button) and publishes it as body.qv-narrow. Keying these rules
   off that class rather than a media query of their own keeps one source of
   truth: setGameWidth() can move the threshold at runtime, which a media query
   couldn't follow.

   The sizes here target WCAG 2.2's 44x44 CSS px pointer target (2.5.5 Target
   Size (Enhanced)) and lift chrome text to 16px, matching the 12pt default
   body text rather than sitting well below it.
   --------------------------------------------------------------------------- */

.qv-narrow {
    --qv-sidebar-width: min(320px, 85vw);
}

/* The status bar is a fixed 32px when wide, which can't hold a 44px button.
   updateStatusVisibility() measures whatever height this ends up being rather
   than assuming, so #gamePanel/#gridPanel/#gamePanes stay directly below it. */
.qv-narrow div#qv-status {
    height: auto;
    min-height: 50px;
}

.qv-narrow div#controlButtons {
    padding-top: 2px;
}

.qv-narrow div#controlButtons .ui-button {
    font-size: 16px !important;
    min-height: 44px;
    min-width: 44px;
    /* jQuery UI puts the padding on the inner .ui-button-text span, so the
       label sits at the top of a min-height-stretched button unless the button
       itself centres it. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.qv-narrow div#location {
    padding-top: 12px;
}

/* Side pane: 12px text in 15px rows, inside a 220px overlay.

   The overlay is anchored between the status bar (updateStatusVisibility()
   sets its top from the bar's measured height, so it can't end up underneath
   it) and the bottom of the window. "height: 100%" would instead run the
   overlay's bottom edge off the screen by however far down its top starts,
   putting the end of a long pane out of reach. */
.qv-narrow #sidebar {
    width: var(--qv-sidebar-width);
    box-sizing: border-box;
    height: auto;
    bottom: 0;
}

/* In the wide layout #gamePanes is a fixed, floated column positioned against
   the viewport. Inside the narrow overlay it should simply be the overlay's
   content: laying it out in flow is what lets #sidebar's own overflow-y scroll
   it, which a fixed (out-of-flow) child left it unable to do - so a pane taller
   than the screen had nothing to scroll and its lower half was unreachable.
   float: none because a float would shrink-wrap instead of filling the width,
   and min-height: 0 because a 100% of the overlay plus its padding is always
   fractionally too tall, leaving the overlay permanently scrollable by a few
   pixels. */
.qv-narrow div#gamePanes {
    position: static;
    float: none;
    width: auto;
    min-height: 0;
}

.qv-narrow #gamePanes .ui-widget {
    font-size: 16px;
}

.qv-narrow .ui-accordion-header {
    font-size: 16px;
}

.qv-narrow button.accordion-header-text {
    min-height: 44px;
}

.qv-narrow .elementList li {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
    box-sizing: border-box;
}

/* Six 44px rows rather than the ten 15px ones the 200px cap used to hold. */
.qv-narrow .elementListWrapper {
    max-height: 264px;
}

/* The multi-open accordion's expand/collapse arrow is a bare .ui-icon, not the
   .ui-accordion-header-icon that jQuery UI's own centring rule targets, so it
   keeps its static position at the top-left of the header's padding box - which
   left it stranded against the top of a header now 44px tall. Centre it on the
   header and scale the 16px sprite up to match the rest of the touch chrome
   (transform rather than background-size, so the sprite's per-icon background
   position doesn't have to be recomputed). */
.qv-narrow .ui-accordion-header > .ui-icon {
    top: 50%;
    margin-top: -8px;
    transform: scale(1.5);
}

/* The compass lives in the same pane, and its buttons are 35px. */
.qv-narrow .compassbutton {
    height: 44px;
    width: 44px;
}

/* playercore.js pins the direction icon at an inline left: 0.8em, which centres
   it in a 35px button but not a 44px one - hand centring back to jQuery UI's
   own rule for it. */
.qv-narrow .compassbutton span.ui-icon {
    left: 50% !important;
    margin-left: -8px;
}

.qv-narrow #compassTable .ui-button {
    font-size: 14px !important;
}

.qv-narrow .verbButtons .ui-button {
    font-size: 14px !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hyperlink pop-up menu. The font size itself is the game's to choose (see
   SetMenuFontSize in playercore.js, which applies a floor here rather than
   overriding it outright), so only the row height is set from CSS. */
.qv-narrow div.jj_menu_item span {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 10px;
    box-sizing: border-box;
}