/*─────────────────────────────────────────────────────────────────────────*/
/*  Imports                                                               */
/*─────────────────────────────────────────────────────────────────────────*/
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/*─────────────────────────────────────────────────────────────────────────*/
/*  Color & Typography Variables                                          */
/*─────────────────────────────────────────────────────────────────────────*/
:root {
  /* Core palette */
  --sky-blue:         #8ecae6;
  --blue-green:       #219ebc;
  --prussian-blue:    #023047;
  --selective-yellow: #ffb703;
  --ut-orange:        #fb8500;

  /* Font stacks */
  --font-sans:  'Verdana', sans-serif;
  --font-retro: 'Press Start 2P', cursive;

  /* Light-theme mappings */
  --color-bg:        var(--sky-blue);       /* page background */
  --color-text:      var(--prussian-blue);  /* body text */
  --color-nav-bg:    var(--prussian-blue);  /* nav background */
  --color-nav-text:  #fff;                 /* nav text */
  --color-link:      var(--prussian-blue);
  --color-link-hover:var(--blue-green);
  --color-heading-1: var(--prussian-blue);
  --color-heading-2: var(--blue-green);
}

/*─────────────────────────────────────────────────────────────────────────*/
/*  Base / Reset                                                         */
/*─────────────────────────────────────────────────────────────────────────*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color:            var(--color-text);
  font-family:      var(--font-sans);
  font-size:        14px;
  line-height:      1.6;
}

/*─────────────────────────────────────────────────────────────────────────*/
/*  Typography                                                            */
/*─────────────────────────────────────────────────────────────────────────*/
/* Captions under images */
.caption {
  display:      block;
  margin:       5px 0 15px;
  font-family:  var(--font-sans);
  font-size:    12px;
  font-style:   italic;
  line-height:  1.4;
  color:        var(--color-text);
}

/* Headings */
h1, h2, h3, h4 {
  margin:        20px 0 10px;
  font-family:   var(--font-retro);
}

h1 {
  font-size: 24px;
  color:     var(--color-heading-1);
}

h2 {
  font-size: 20px;
  color:     var(--color-heading-2);
  text-shadow:   1px 1px #000;
}

h3 {
  font-size: 18px;
  color:     var(--color-text);
}

h4 {
  font-size: 16px;
  color:     var(--color-text);
}

/*─────────────────────────────────────────────────────────────────────────*/
/*  Links                                                                 */
/*─────────────────────────────────────────────────────────────────────────*/
a {
  color:           var(--color-link);
  font-weight:     bold;
  text-decoration: underline;
  transition:      color 0.2s ease-in-out;
}

a:hover,
a:focus {
  color:           var(--color-link-hover);
  background-color: transparent;
  outline:         none;
  text-decoration: none;
}

a:active {
  color: var(--color-link-hover);
}

/*─────────────────────────────────────────────────────────────────────────*/
/*  Navigation                                                            */
/*─────────────────────────────────────────────────────────────────────────*/
nav {
  position:       sticky;
  top:            0;
  z-index:        1000;
  padding:        10px;
  text-align:     center;
  background-color: var(--color-nav-bg);
  color:          var(--color-nav-text);
  border-bottom:  4px solid var(--ut-orange);
  box-shadow:     0 4px #000;
  font-family:    var(--font-retro);
}

nav a {
  margin:           0 10px;
  font-size:        12px;
  text-transform:   uppercase;
  text-decoration:  none;
  color:            var(--color-nav-text);
}

nav a:hover {
  color: var(--color-link);
}

/*─────────────────────────────────────────────────────────────────────────*/
/*  Layout Containers                                                     */
/*─────────────────────────────────────────────────────────────────────────*/
.game-container {
  max-width: 600px;
  margin:    0 auto;
  padding:   20px;
}

/* Prevent any div from overflowing viewport */
div {
  max-width:      100vw;
  overflow-wrap:  break-word;
}

/*─────────────────────────────────────────────────────────────────────────*/
/*  Game Blocks & Components                                              */
/*─────────────────────────────────────────────────────────────────────────*/
.game-block {
  display:           block;
  margin:            20px 0;
  padding:           20px;
  border:            4px solid #000;
  box-shadow:        4px 4px #000;
  font-family:       var(--font-retro);
  color:             var(--prussian-blue);
  background-color:  var(--selective-yellow);
  background-image:  repeating-linear-gradient(
                      45deg,
                      var(--sky-blue)   0,
                      var(--sky-blue)   10px,
                      var(--blue-green) 10px,
                      var(--blue-green) 20px
                    );
  text-shadow:       1px 1px #fff;
}

/*─────────────────────────────────────────────────────────────────────────*/
/*  Media                                                                 */
/*─────────────────────────────────────────────────────────────────────────*/
img {
  display:   block;
  max-width: 100%;
  height:    auto;
}


details {
  margin: 1em 0;
  border: 2px solid var(--prussian-blue);
  border-radius: 6px;
  padding: 0.5em 1em;
  background: var(--sky-blue);
  color: var(--prussian-blue);
}

summary {
  cursor: pointer;
  font-weight: bold;
  position: relative;
  list-style: none;
  padding-left: 1.5em; /* room for arrow */
  transition: color 0.2s ease;
}

summary::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.2s ease, color 0.2s ease;
  color: var(--blue-green);
}

summary:hover {
  color: var(--ut-orange);
}

details[open] summary::before {
  transform: rotate(90deg);
  color: var(--selective-yellow);
}