.cyoa .page, .cyoa .warning { display: none; }
.cyoa .start { display: initial; }

.cyoa .fork {
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
  margin: .5em auto;
  width: 90%;
  gap: 1em;
}

.fork .nav {
    flex-basis: 100%;
    display: grid;
    gap: .5em;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.cyoa .fork a {
  border: .1em solid;
  text-align: center;
  min-width: 5em;
  text-indent: 0;
  padding: 0 .5em;
  margin: 0;
  opacity: 80%;
}
.cyoa .fork a:hover { background: var(--button1); opacity:100%}
.cyoa a[disabled] {
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 25%;
}

.go-north { grid-area: 1 / 2}
.go-west { grid-area: 2 / 3}
.go-east { grid-area: 2 / 1}
.go-south { grid-area: 2 / 2}

.cyoa .debugger { display: none; }
:target ~ .debug .page > .debugger { display: flex; }
.debugger {
    display: none;
    margin-bottom: 1em;
    text-align: center;
    font-family: monospace;
    font-size: 75%;
    gap: .5em;
    flex-flow: row wrap;
}
.debugger > span {
    border: .2em solid var(--accent1);
    padding: 0 .1em;
}
.debugger .var { flex: 1 1 20%; text-align:left; }
.debugger .var.table { flex-basis: 100%;}
.debugger .var > :first-child:after { content: ": "; }
.debugger .var:not(.table) > :not(:first-child) {
    border-bottom: .1em dashed var(--accent1);
}
.debugger .var.table > :not(:first-child) {
    display:flex;
    flex-flow: row wrap;
    gap: .20em;
}