/* Adventure mode (design/gridlord, Appendices F and AA): the map is a canvas
   of 8-px tiles scaled by whole numbers; everything else is DOM dressed in
   the same 256-colour palette. Colours by palette index: parchment 31,
   parchment-dark 32, ink 33, gold 34, ui-red 35, ui-blue 36, ui-green 37. */

.gridlord {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas: "map side" "hud hud" "log log";
    /* Sized by what is in them: the pane's own height must not squeeze the rows. */
    grid-template-rows: repeat(3, max-content);
    gap: 8px;
    align-items: start;
    align-content: start;
}

@media (max-width: 600px) {
    .gridlord {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "map" "side" "hud" "log";
        grid-template-rows: repeat(4, max-content);
    }
}

.gridlord .gl-map-holder {
    grid-area: map;
    overflow: auto;
    background: #000;
    border: 2px solid #503818;
    line-height: 0;
}

#gridlord-map {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background: #000;
    cursor: crosshair;
}

#gridlord-side {
    grid-area: side;
    background: #E8D8A8;
    color: #2A1A10;
    border: 3px double #503818;
    padding: 12px;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    min-height: 120px;
    max-height: 70vh;
    overflow: auto;
}

#gridlord-side h3 {
    margin: 0 0 8px;
    font-size: 15px;
    color: #2A1A10;
}

#gridlord-side p {
    margin: 4px 0;
}

#gridlord-hud {
    grid-area: hud;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
    background: #E8D8A8;
    color: #2A1A10;
    border-top: 3px solid #503818;
    border-bottom: 1px solid #C0A870;
    padding: 6px 10px;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
}

.gl-stat b {
    font-weight: bold;
}

.gl-stone {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 2px -1px 6px;
    border: 1px solid #2A1A10;
    transform: rotate(45deg);
}

.gl-stone-air { background: #88C0F0; }
.gl-stone-earth { background: #287028; }
.gl-stone-fire { background: #E06020; }
.gl-stone-water { background: #4080C8; }
.gl-stone-spirit { background: #9060D0; }

.gl-news {
    flex: 1 1 100%;
    color: #B03030;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#gridlord-log {
    grid-area: log;
    margin: 0;
    padding: 4px 10px 4px 28px;
    background: #C0A870;
    color: #2A1A10;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    max-height: 4.5em;
    overflow: hidden;
}

#gridlord-log.open {
    max-height: none;
}

.gl-btn {
    display: inline-block;
    margin: 3px 4px 3px 0;
    padding: 4px 10px;
    background: #C0A870;
    color: #2A1A10;
    border: 2px solid #503818;
    box-shadow: inset -2px -2px 0 #806030, inset 2px 2px 0 #F8E8C0;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    cursor: pointer;
}

.gl-btn:active {
    box-shadow: inset 2px 2px 0 #806030, inset -2px -2px 0 #F8E8C0;
}

.gl-btn[disabled] {
    opacity: 0.5;
    cursor: default;
}

.gl-btn.gl-go {
    background: #309030;
    color: #F8F8F8;
}

.gl-btn.gl-danger {
    background: #B03030;
    color: #F8F8F8;
}

.gl-error {
    color: #B03030;
    font-weight: bold;
}

.gl-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gl-card {
    width: 86px;
    background: #F8E8C0;
    border: 1px solid #2A1A10;
    padding: 3px;
    font-size: 11px;
    line-height: 1.2;
}

.gl-card .gl-band {
    height: 14px;
    margin-bottom: 3px;
    background: #A8A8A8;
}

.gl-card.gl-sold {
    opacity: 0.5;
}

.gl-card .gl-btn {
    padding: 1px 6px;
    font-size: 11px;
    margin: 2px 0 0;
}

.gl-form label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    line-height: 1.3;
    color: #2A1A10;
}

/* The page sizes every input to its row; a radio keeps its own size here. */
.gl-form input[type="radio"] {
    width: auto;
    height: auto;
    flex: 0 0 auto;
    margin: 0;
}

.gl-form label > span {
    flex: 1 1 auto;
    min-width: 0;
}

/* The new-quest form stands alone, as wide as the pane allows, until the quest begins. */
.gridlord.gl-titled #gridlord-side {
    grid-area: map;
    justify-self: center;
    width: min(100%, 720px);
    max-height: none;
    font-size: 14px;
}

.gl-form input[type="text"] {
    width: 100%;
    font-family: "Courier New", Courier, monospace;
}

.gl-runs {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 8px;
}

.gl-runs th, .gl-runs td {
    border-bottom: 1px solid #C0A870;
    padding: 2px 4px;
    text-align: left;
}

.gl-badge {
    display: inline-block;
    padding: 0 5px;
    margin: 0 3px 3px 0;
    background: #2A1A10;
    color: #F8E8C0;
    font-size: 11px;
}

.gl-riddle .gl-btn {
    display: block;
}

/* ---- the title screen: the scene on the canvas, the logo and the menu over it ---- */

.gridlord [hidden] {
    display: none !important;
}

/* The title screen alone: the stage hugs the canvas and sits centred across the whole pane. */
.gridlord.gl-titled {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "map";
}

.gridlord.gl-titled .gl-map-holder {
    text-align: center;
    overflow: hidden;
}

.gl-stage {
    position: relative;
    display: inline-block;
    line-height: 0;
    container-type: inline-size;
}


.gl-title-menu {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 4% 0 6% 28%;
    pointer-events: none;
}

.gl-title-logo {
    position: absolute;
    top: 4%;
    left: 50%;
    width: 40%;
    transform: translateX(-50%);
    image-rendering: auto;
    filter: drop-shadow(2px 2px 0 #2A1A10);
    pointer-events: none;
}

.gl-title-item {
    pointer-events: auto;
    background: none;
    border: 0;
    padding: 0.15em 0 0.15em 1.6em;
    margin: 0.1em 0;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: bold;
    font-size: clamp(14px, 3.4cqw, 34px);
    line-height: 1.25;
    height: auto;
    min-height: 0;
    letter-spacing: 1px;
    color: #F0D040;
    text-shadow: 2px 2px 0 #2A1A10, -1px -1px 0 #2A1A10, 1px -1px 0 #2A1A10, -1px 1px 0 #2A1A10;
    cursor: pointer;
    position: relative;
    text-align: left;
}

.gl-title-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.9em;
    height: 0.9em;
    transform: translateY(-50%);
    background:
        linear-gradient(#C0A870, #C0A870) center / 40% 40% no-repeat,
        #2A1A10;
    border: 2px solid #C0A870;
    box-shadow: inset 0 0 0 2px #2A1A10;
}

.gl-title-item:hover:not([disabled]) {
    color: #F8E8C0;
}

.gl-title-item:hover:not([disabled])::before {
    background: linear-gradient(#F0D040, #F0D040) center / 40% 40% no-repeat, #2A1A10;
}

.gl-title-item[disabled] {
    color: #806030;
    cursor: default;
}

/* ---- the town screen: the scene with its doors as medallions ---- */

.gl-town-menu {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gl-town-name {
    position: absolute;
    top: 3%;
    left: 0;
    right: 0;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: bold;
    font-size: clamp(14px, 4cqw, 36px);
    color: #F8E8C0;
    text-shadow: 2px 2px 0 #2A1A10, -1px -1px 0 #2A1A10, 1px -1px 0 #2A1A10, -1px 1px 0 #2A1A10;
    line-height: 1.2;
}

.gl-town-btn {
    pointer-events: auto;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: clamp(10px, 2.3cqw, 20px);
    line-height: 1.2;
    transform: translate(-50%, 0);
}

.gl-town-btn[data-at="tl"] { left: 22%; top: 12%; }
.gl-town-btn[data-at="tr"] { left: 78%; top: 12%; }
.gl-town-btn[data-at="ml"] { left: 14%; top: 44%; }
.gl-town-btn[data-at="mc"] { left: 50%; top: 40%; }
.gl-town-btn[data-at="bl"] { left: 24%; top: 70%; }
.gl-town-btn[data-at="br"] { left: 78%; top: 70%; }

.gl-medallion {
    width: 3.2em;
    height: 3.2em;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #3050B0, #103070 70%);
    border: 0.18em solid #C0A870;
    box-shadow: 0 0 0 0.12em #2A1A10, 0.15em 0.2em 0 #2A1A10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gl-medallion-icon {
    width: 16px;
    height: 16px;
    background-image: url("/gridlord/ui.png");
    background-repeat: no-repeat;
    image-rendering: pixelated;
    transform: scale(2);
}

.gl-door-label {
    background: linear-gradient(#5A6080, #3A4060);
    border: 0.12em solid #C0A870;
    border-radius: 0.4em;
    padding: 0.15em 0.7em;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: bold;
    color: #F8E8C0;
    text-shadow: 1px 1px 0 #2A1A10;
    white-space: nowrap;
}

.gl-town-btn:hover:not([disabled]) .gl-door-label {
    color: #F0D040;
}

.gl-town-btn[disabled] {
    cursor: default;
    opacity: 0.55;
}