/* Стили меню и холста головоломок из Simon Tatham's Portable Puzzle Collection, лицензия MIT: /LICENSES/sgt-puzzles-MIT.txt */

/* Top-level form for the game menu */
#gamemenu {
    margin-top: 0;
    margin-bottom: 0.375em;
    /* Add a little mild text formatting */
    font-weight: bold;
    font-size: 0.8em;
    text-align: center
}

main {
    text-align: center;
}

/* Inside that form, the main menu bar and every submenu inside it is a <ul> */
#gamemenu ul {
    list-style: none;  /* get rid of the normal unordered-list bullets */
    /* make top-level menu bar items appear side by side */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    /* Compensate for the negative margins on menu items by adding a
     * little bit of padding so that the borders of the items don't protrude
     * beyond the menu. */
    padding: 0.5px;
}

/* Individual menu items are <li> elements within such a <ul> */
#gamemenu li {
    /* Suppress the text-selection I-beam pointer */
    cursor: default;
    /* Surround each menu item with a border. */
    border: 1px solid rgb(180,180,180);
    /* Arrange that the borders of each item overlap the ones next to it. */
    margin: -0.5px;
    /* Set position:relative, so that if this item has a submenu it can
     * position itself relative to the parent item. */
    position: relative;
}

#gamemenu li[role=separator] {
    width: 1.5em;
    border: 0;
}

/* The interactive contents of menu items are their child elements. */
#gamemenu li > * {
    /* Line height and padding appropriate to top-level menu items */
    padding: 0.2em 0.75em;
    margin: 0;
    display: block;
}

#gamemenu :disabled {
    /* Grey out disabled buttons */
    color: rgba(0,0,0,0.5);
}

#gamemenu li > :hover:not(:disabled),
#gamemenu li > .focus-within {
    /* When the mouse is over a menu item, highlight it */
    background: rgba(0,0,0,0.3);
}

@media (max-width:18em) {
    /* Suppress some words in top-level menu items when viewport
     * is very small */
    .verbiage {
        display: none;
    }
}

#gamemenu ul ul {
    /* Second-level menus and below are not displayed by default */
    display: none;
    /* When they are displayed, they are positioned immediately below
     * their parent <li>, and with the left edge aligning */
    position: absolute;
    top: 100%;
    left: 0;
    /* Switch to vertical stacking for drop-down submenus */
    flex-direction: column;
    /* We must specify an explicit background colour for submenus, because
     * they must be opaque (don't want other page contents showing through
     * them). */
    background: white;
    /* And make sure they appear in front. */
    z-index: 50;
}

#gamemenu ul ul.left {
    /* A second-level menu with class "left" aligns its right edge with
     * its parent, rather than its left edge */
    left: inherit; right: 0;
}

/* Menu items in second-level menus and below */
#gamemenu li li {
    /* Inhibit wrapping, so the submenu will expand its width as needed. */
    white-space: nowrap;
    /* Override the text-align:center from above */
    text-align: left;
}

#gamemenu ul ul ul {
    /* Third-level submenus are drawn to the side of their parent menu
     * item, not below it */
    top: 0; left: 100%;
}

#gamemenu ul ul ul.left {
    /* A submenu with class "left" goes to the left of its parent,
     * not the right */
    left: inherit; right: 100%;
}

#gamemenu :hover > ul,
#gamemenu .focus-within > ul {
    /* Last but by no means least, the all-important line that makes
     * submenus be displayed! Any <ul> whose parent <li> is being
     * hovered over gets display:flex overriding the display:none
     * from above. */
    display: flex;
}

#gamemenu button {
    /* Menu items that trigger an action.  We put some effort into
     * removing the default button styling. */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    color: inherit;
    background: initial;
    border: initial;
    text-align: inherit;
    width: 100%;
}

#gamemenu .tick {
    /* The tick at the start of a menu item, or its unselected equivalent.
     * This is represented by an <input type="radio">, so we put some
     * effort into overriding the default style. */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    margin: initial;
    font: inherit;
}

#gamemenu .tick::before {
    content: "\2713";
}

#gamemenu .tick:not(:checked) {
    /* Tick for an unselected menu entry. */
    color: transparent;
}

#gamemenu li > div:after {
    /* Downward arrow for submenu headings at the top level. */
    content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%3E%3Cpolygon%20points='0,5,10,5,5,10'/%3E%3C/svg%3E");
    margin-left: 0.5em;
}

#gamemenu li li > div:after {
    /* Rightward arrow marker for submenus on lower-level menus. */
    content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='10'%3E%3Cpolygon%20points='0,0,10,5,0,10'/%3E%3C/svg%3E");
    float: right;
}


#statusbar {
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #d8d8d8;
    border-left: 2px solid #c8c8c8;
    border-top: 2px solid #c8c8c8;
    border-right: 2px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;
    height: 1.2em;
}

#dlgdimmer {
    width: 100%;
    height: 100%;
    background: #000000;
    position: fixed;
    opacity: 0.3;
    left: 0;
    top: 0;
    z-index: 99;
}

#dlgform {
    width: 66.6667vw;
    opacity: 1;
    background: #ffffff;
    color: #000000;
    position: absolute;
    border: 2px solid black;
    padding: 20px;
    top: 10vh;
    left: 16.6667vw;
    z-index: 100;
}

#dlgform h2 {
    margin-top: 0px;
}

#resizehandle {
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    cursor: se-resize;
}

#resizable {
    position: relative;
    margin: 0 auto;
}

#puzzlecanvas {
    display: block;
    width: 100%;
    /* This sets the font that will be used in the puzzle. */
    font-family: sans-serif;
}

#apology {
    padding: 0 1em 0 1em;
    margin: 1em;
    border: 2px solid red;
}

.apology-title {
    text-align: center;
}

@media print {
    /* Interactive controls should be hidden when printing. */
    #gamemenu, #resizehandle { display: none; }
}
/* Наши правки под оформление сайта */
#gamemenu{font-size:14px;font-weight:600;margin-bottom:10px}
#gamemenu li{border-color:var(--line);background:var(--card);border-radius:0}
#gamemenu ul ul{background:var(--card)}
#statusbar{background:var(--soft);border:1px solid var(--line);border-radius:0 0 8px 8px;padding:0 8px;height:auto;min-height:1.4em;font-size:14px}
#statusbar:empty{display:none}
#resizable{max-width:100%}
#puzzlecanvas{border-radius:8px;touch-action:none}
#dlgform{width:min(90vw,480px);left:50%;transform:translateX(-50%);border-radius:12px;border:1px solid var(--line)}
#apology{border-color:var(--accent);border-radius:12px}