diff --git a/web/public/mtg/choose.html b/web/public/mtg/choose.html
deleted file mode 100644
index cb84ced5..00000000
--- a/web/public/mtg/choose.html
+++ /dev/null
@@ -1,225 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <!-- Google Tag Manager -->
-    <script>
-      ;(function (w, d, s, l, i) {
-        w[l] = w[l] || []
-        w[l].push({
-          'gtm.start': new Date().getTime(),
-          event: 'gtm.js',
-        })
-        var f = d.getElementsByTagName(s)[0],
-          j = d.createElement(s),
-          dl = l !== 'dataLayer' ? '&l=' + l : ''
-        j.async = true
-        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
-        f.parentNode.insertBefore(j, f)
-      })(window, document, 'script', 'dataLayer', 'GTM-M3MBVGG')
-    </script>
-    <!-- End Google Tag Manager -->
-    <meta charset="UTF-8" />
-    <style type="text/css">
-      body {
-        position: relative;
-      }
-
-      .play-page {
-        display: flex;
-        flex-direction: row-reverse;
-        font-family: Georgia, 'Times New Roman', Times, serif;
-        min-height: 200px;
-      }
-
-      h1,
-      h3 {
-        font-family: Verdana, Geneva, Tahoma, sans-serif;
-        text-align: center;
-      }
-
-      #submit {
-        margin-top: 10px;
-        padding: 8px 20px;
-        background-color: cadetblue;
-        border: none;
-        border-radius: 3px;
-        font-size: 1.1em;
-        color: white;
-        cursor: pointer;
-      }
-
-      #submit:hover {
-        background-color: rgb(0, 146, 156);
-      }
-
-      [type='radio'] {
-        display: none;
-      }
-
-      [type='radio'] + label.radio-label {
-        background: lightgrey;
-        display: block;
-        padding: 10px;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-
-      label.radio-label:hover {
-        background: darkgrey;
-      }
-
-      [type='radio']:checked + label.radio-label {
-        background: lightcoral;
-      }
-
-      .radio-label h3 {
-        margin: 0;
-        display: inline-block;
-        vertical-align: middle;
-        width: 220px;
-      }
-
-      .thumbnail {
-        display: inline-block;
-        vertical-align: middle;
-        width: 67px;
-        height: 48px;
-        margin-right: 4px;
-      }
-
-      body {
-        padding: 70px 0 30px;
-      }
-
-      #addl-options {
-        position: absolute;
-        top: 30px;
-        right: 30px;
-        background-color: white;
-        padding: 10px;
-        cursor: pointer;
-        width: 200px;
-      }
-
-      #addl-options > summary {
-        list-style: none;
-        text-align: right;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- Google Tag Manager (noscript) -->
-    <noscript>
-      <iframe
-        src="https://www.googletagmanager.com/ns.html?id=GTM-M3MBVGG"
-        height="0"
-        width="0"
-        style="display: none; visibility: hidden"
-      ></iframe>
-    </noscript>
-    <!-- End Google Tag Manager (noscript) -->
-    <h1>Magic the Guessering</h1>
-    <div class="play-page" style="justify-content: center">
-      <form
-        method="get"
-        action="index.html"
-        style="display: flex; flex-direction: column; align-items: center"
-      >
-        <!-- <input type="radio" id="wrath" name="whichguesser" value="wrath" />
-        <label class="radio-label" for="wrath">
-          <img
-            class="thumbnail"
-            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/0/6/0619d670-7b53-4185-a25d-2fab5db1aab5.jpg?1562896185"
-          />
-          <h3>I'll Clean Sweep</h3></label
-        ><br /> -->
-
-        <input
-          type="radio"
-          id="counterspell"
-          name="whichguesser"
-          value="counterspell"
-          checked
-        />
-        <label class="radio-label" for="counterspell">
-          <img
-            class="thumbnail"
-            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/7/1/71cfcba5-1571-48b8-a3db-55dca135506e.jpg?1562843855"
-          />
-          <h3>Counterspell Guesser</h3></label
-        ><br />
-
-        <!-- <input type="radio" id="terror" name="whichguesser" value="terror" />
-        <label class="radio-label" for="terror">
-          <img
-            class="thumbnail"
-            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/2/d/2dd5d601-aff7-4b7a-ab6c-b89f403af076.jpg?1562905752"
-          />
-          <h3>I'm a Terror-able Guesser</h3></label
-        ><br /> -->
-
-        <input type="radio" id="burn" name="whichguesser" value="burn" />
-        <label class="radio-label" for="burn">
-          <img
-            class="thumbnail"
-            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/6/0/60b2fae1-242b-45e0-a757-b1adc02c06f3.jpg?1562760596"
-          />
-          <h3>Match With Hot Singles</h3></label
-        ><br />
-
-        <!-- <input type="radio" id="beast" name="whichguesser" value="beast" />
-        <label class="radio-label" for="beast">
-          <img
-            class="thumbnail"
-            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/3/3/33f7e788-8fc7-49f3-804b-2d7f96852d4b.jpg?1562905469"
-          />
-          <h3>Finding Fantastic Beasts</h3></label
-        >
-        <br /> -->
-
-        <details id="addl-options">
-          <summary>
-            <img
-              src="http://mythicspoiler.com/images/buttons/ustset.png"
-              style="width: 32px; vertical-align: top"
-            />
-            Options
-          </summary>
-          <input type="checkbox" name="digital" id="digital" checked />
-          <label for="digital">include digital cards</label>
-          <br />
-          <input type="checkbox" name="un" id="un" checked />
-          <label for="un">include un-cards</label>
-          <br />
-          <input type="checkbox" name="original" id="original" />
-          <label for="original">restrict to only original printing</label>
-        </details>
-        <input type="submit" id="submit" value="Play" />
-      </form>
-    </div>
-
-    <div style="margin: -40px 0 0; height: 60px">
-      <a href="https://paypal.me/idamayer">Donate, buy us a boba 🧋</a>
-    </div>
-
-    <div
-      style="
-        font-size: 0.9em;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        color: grey;
-        font-style: italic;
-      "
-    >
-      made by
-      <a
-        style="color: rgb(0, 146, 156); font-style: italic"
-        href="https://idamayer.com"
-        >Ida Mayer</a
-      >
-      & Alex Lien 2022
-    </div>
-  </body>
-</html>
diff --git a/web/public/mtg/guess.html b/web/public/mtg/guess.html
new file mode 100644
index 00000000..f0045f08
--- /dev/null
+++ b/web/public/mtg/guess.html
@@ -0,0 +1,554 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- Google Tag Manager -->
+    <script>
+      ;(function (w, d, s, l, i) {
+        w[l] = w[l] || []
+        w[l].push({
+          'gtm.start': new Date().getTime(),
+          event: 'gtm.js',
+        })
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l !== 'dataLayer' ? '&l=' + l : ''
+        j.async = true
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
+        f.parentNode.insertBefore(j, f)
+      })(window, document, 'script', 'dataLayer', 'GTM-M3MBVGG')
+    </script>
+    <!-- End Google Tag Manager -->
+    <meta charset="UTF-8" />
+    <script type="text/javascript" src="app.js"></script>
+    <style type="text/css">
+      body {
+        position: relative;
+      }
+
+      .play-page {
+        display: flex;
+        flex-direction: row-reverse;
+        font-family: Georgia, 'Times New Roman', Times, serif;
+      }
+
+      h1 {
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        text-align: center;
+      }
+
+      form {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-right: 240px;
+      }
+
+      .cards-container {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        justify-content: center;
+      }
+
+      .card {
+        width: 230px;
+        height: 208px;
+        border: 5px solid lightgrey;
+        margin: 5px;
+        align-items: flex-end;
+        box-sizing: border-box;
+        border-radius: 11px;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        /*background-size: contain;*/
+        background-size: 220px;
+        background-repeat: no-repeat;
+        transition: height 1s, background-image 1s, border 0.4s 0.6s;
+        background-position-y: calc(50% - 18px);
+      }
+
+      .card:not([data-name^='name'])::after {
+        content: '';
+        height: 34px;
+        background: white;
+        width: 100%;
+      }
+
+      .answer-page .card {
+        height: 350px;
+        /*padding-top: 310px;*/
+        /*background-size: cover;*/
+        overflow: hidden;
+        border-color: rgb(0, 146, 156);
+      }
+
+      .answer-page .card.incorrect {
+        border-color: rgb(216, 27, 96);
+      }
+
+      .names-bank {
+        position: fixed;
+        padding: 10px 10px 40px;
+      }
+
+      .names-bank .name {
+        margin: 6px 0;
+      }
+
+      .answer-page .names-bank .name {
+        display: none;
+      }
+
+      .answer-page .names-bank .word-count {
+        display: none;
+      }
+
+      .word-count {
+        text-align: center;
+        font-style: italic;
+        color: #444;
+      }
+
+      .score {
+        width: 100%;
+        text-align: center;
+        background-color: rgb(255, 193, 7);
+        width: 200px;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        opacity: 0;
+      }
+
+      .names-bank .score {
+        overflow: hidden;
+        height: 0;
+      }
+
+      .answer-page .names-bank .score {
+        height: auto;
+        display: block;
+        opacity: 1;
+        transition: opacity 1.2s 0.2s;
+        padding: 20px;
+      }
+
+      .name {
+        width: 230px;
+        min-height: 36px;
+        border-radius: 2px;
+        background-color: lightgrey;
+        padding: 8px 12px 2px;
+        box-sizing: border-box;
+      }
+
+      .card .name {
+        border-radius: 0 0 5px 5px;
+      }
+
+      #submit {
+        margin-top: 10px;
+        padding: 8px 20px;
+        background-color: cadetblue;
+        border: none;
+        border-radius: 3px;
+        font-size: 1.1em;
+        color: white;
+        cursor: pointer;
+      }
+
+      #submit:hover {
+        background-color: rgb(0, 146, 156);
+      }
+
+      #newGame {
+        padding: 8px 20px;
+        background-color: lightpink;
+        border: none;
+        position: absolute;
+        top: 5px;
+        left: 20px;
+        border-radius: 3px;
+        font-size: 0.7em;
+        cursor: pointer;
+      }
+
+      #newGame:hover {
+        background-color: coral;
+      }
+
+      .selected {
+        background-color: orange;
+      }
+
+      @media screen and (orientation: landscape) and (max-height: 680px) {
+        /* CSS applied when the device is in landscape mode*/
+        .names-bank {
+          padding: 0;
+          top: 0;
+          max-height: 100vh;
+          overflow: scroll;
+        }
+
+        body {
+          font-size: 20px;
+        }
+
+        .word-count {
+          font-size: 14px;
+        }
+
+        h1 {
+          margin-right: 240px;
+        }
+      }
+
+      @media screen and (orientation: portrait) and (max-width: 1100px) {
+        body {
+          font-size: 1.8em;
+        }
+
+        .play-page {
+          flex-direction: column;
+        }
+
+        .names-bank {
+          flex-direction: row;
+          display: flex;
+          flex-wrap: wrap;
+          /* position: fixed; */
+          padding: 10px 10px 40px;
+          position: sticky;
+          top: 0;
+          z-index: 100;
+          background: white;
+        }
+
+        .answer-page .names-bank {
+          min-width: 100%;
+          justify-content: center;
+        }
+
+        form {
+          margin: 0;
+        }
+
+        .names-bank .name {
+          margin: 6px;
+        }
+
+        .names-bank .score {
+          width: 0;
+        }
+
+        .answer-page .names-bank .score {
+          width: auto;
+        }
+
+        .word-count {
+          position: absolute;
+          margin-top: -20px;
+        }
+
+        .name {
+          width: 300px;
+        }
+
+        .card {
+          width: 300px;
+          background-size: 300px;
+          height: 266px;
+        }
+
+        .answer-page .card {
+          height: 454px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript>
+      <iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-M3MBVGG"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe>
+    </noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <h1><span id="guess-type"></span>: <span id="round-number"></span></h1>
+
+    <div class="play-page">
+      <div
+        class="names-bank"
+        ondrop="returnDrop(event)"
+        ondragover="event.preventDefault()"
+      >
+        <div class="score">
+          YOUR SCORE
+          <div>Correct Answers This Round: <span id="score-amount"></span></div>
+          <div>
+            Correct Answers In Total: <span id="score-amount-total"></span>
+          </div>
+          <div>Overall Percent: <span id="score-percent"></span>%</div>
+        </div>
+        <div class="word-count"><span id="words-left"></span></div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-1"
+        >
+          Name 1
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-2"
+        >
+          Name 2
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-3"
+        >
+          Name 3
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-4"
+        >
+          Name 4
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-5"
+        >
+          Name 5
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-6"
+        >
+          Name 6
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-7"
+        >
+          Name 7
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-8"
+        >
+          Name 8
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-9"
+        >
+          Name 9
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-10"
+        >
+          Name 10
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-11"
+        >
+          Name 11
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-12"
+        >
+          Name 12
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-13"
+        >
+          Name 13
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-14"
+        >
+          Name 14
+        </div>
+        <div
+          class="name"
+          draggable="true"
+          ondragstart="drag(event)"
+          onClick="selectName(event)"
+          id="name-15"
+        >
+          Name 15
+        </div>
+      </div>
+      <form onsubmit="toggleMode(event)">
+        <div class="cards-container">
+          <div
+            class="card"
+            ondrop="drop(event,1)"
+            ondragover="allowDrop(event,1)"
+            onclick="dropSelected(event, 1)"
+            id="card-1"
+          ></div>
+          <div
+            class="card"
+            ondrop="drop(event,2)"
+            ondragover="allowDrop(event,2)"
+            onclick="dropSelected(event, 2)"
+            id="card-2"
+          ></div>
+          <div
+            class="card"
+            ondrop="drop(event,3)"
+            ondragover="allowDrop(event,3)"
+            onclick="dropSelected(event, 3)"
+            id="card-3"
+          ></div>
+          <div
+            class="card"
+            ondrop="drop(event,4)"
+            ondragover="allowDrop(event,4)"
+            onclick="dropSelected(event, 4)"
+            id="card-4"
+          ></div>
+          <div
+            class="card"
+            ondrop="drop(event,5)"
+            ondragover="allowDrop(event,5)"
+            onclick="dropSelected(event, 5)"
+            id="card-5"
+          ></div>
+          <div
+            class="card"
+            ondrop="drop(event, 6)"
+            ondragover="allowDrop(event,6)"
+            onclick="dropSelected(event,6)"
+            id="card-6"
+          ></div>
+          <div
+            class="card"
+            ondrop="drop(event,7)"
+            ondragover="allowDrop(event,7)"
+            onclick="dropSelected(event, 7)"
+            id="card-7"
+          ></div>
+          <div
+            class="card"
+            ondrop="drop(event,8)"
+            ondragover="allowDrop(event,8)"
+            onclick="dropSelected(event, 8)"
+            id="card-8"
+          ></div>
+          <div
+            class="card"
+            ondrop="drop(event,9)"
+            ondragover="allowDrop(event,9)"
+            onclick="dropSelected(event, 9)"
+            id="card-9"
+          ></div>
+          <div
+            class="card"
+            ondrop="drop(event,10)"
+            ondragover="allowDrop(event,10)"
+            onclick="dropSelected(event, 10)"
+            id="card-10"
+          ></div>
+          <div
+            class="card"
+            ondrop="drop(event,11)"
+            ondragover="allowDrop(event,11)"
+            onclick="dropSelected(event, 11)"
+            id="card-11"
+          ></div>
+          <div
+            class="card"
+            ondrop="drop(event,12)"
+            ondragover="allowDrop(event,12)"
+            onclick="dropSelected(event, 12)"
+            id="card-12"
+          ></div>
+        </div>
+        <input type="submit" id="submit" value="Submit" />
+      </form>
+    </div>
+
+    <div style="position: absolute; top: 0; left: 0; right: 0; color: grey">
+      <form method="get" action="index.html">
+        <input type="submit" id="newGame" value="New Game" />
+      </form>
+    </div>
+    <div style="margin: -40px 0 0; height: 60px">
+      <a href="https://paypal.me/idamayer">Donate, buy us a boba 🧋</a>
+    </div>
+
+    <div
+      style="
+        font-size: 0.9em;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        color: grey;
+        font-style: italic;
+      "
+    >
+      made by
+      <a
+        style="color: rgb(0, 146, 156); font-style: italic"
+        href="https://idamayer.com"
+        >Ida Mayer</a
+      >
+      & Alex Lien 2022
+    </div>
+  </body>
+</html>
diff --git a/web/public/mtg/index.html b/web/public/mtg/index.html
index 722e4714..8fbd9991 100644
--- a/web/public/mtg/index.html
+++ b/web/public/mtg/index.html
@@ -19,7 +19,6 @@
     </script>
     <!-- End Google Tag Manager -->
     <meta charset="UTF-8" />
-    <script type="text/javascript" src="app.js"></script>
     <style type="text/css">
       body {
         position: relative;
@@ -29,123 +28,15 @@
         display: flex;
         flex-direction: row-reverse;
         font-family: Georgia, 'Times New Roman', Times, serif;
+        min-height: 200px;
       }
 
-      h1 {
+      h1,
+      h3 {
         font-family: Verdana, Geneva, Tahoma, sans-serif;
         text-align: center;
       }
 
-      form {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        margin-right: 240px;
-      }
-
-      .cards-container {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
-        justify-content: center;
-      }
-
-      .card {
-        width: 230px;
-        height: 208px;
-        border: 5px solid lightgrey;
-        margin: 5px;
-        align-items: flex-end;
-        box-sizing: border-box;
-        border-radius: 11px;
-        position: relative;
-        display: flex;
-        justify-content: center;
-        /*background-size: contain;*/
-        background-size: 220px;
-        background-repeat: no-repeat;
-        transition: height 1s, background-image 1s, border 0.4s 0.6s;
-        background-position-y: calc(50% - 18px);
-      }
-
-      .card:not([data-name^='name'])::after {
-        content: '';
-        height: 34px;
-        background: white;
-        width: 100%;
-      }
-
-      .answer-page .card {
-        height: 350px;
-        /*padding-top: 310px;*/
-        /*background-size: cover;*/
-        overflow: hidden;
-        border-color: rgb(0, 146, 156);
-      }
-
-      .answer-page .card.incorrect {
-        border-color: rgb(216, 27, 96);
-      }
-
-      .names-bank {
-        position: fixed;
-        padding: 10px 10px 40px;
-      }
-
-      .names-bank .name {
-        margin: 6px 0;
-      }
-
-      .answer-page .names-bank .name {
-        display: none;
-      }
-
-      .answer-page .names-bank .word-count {
-        display: none;
-      }
-
-      .word-count {
-        text-align: center;
-        font-style: italic;
-        color: #444;
-      }
-
-      .score {
-        width: 100%;
-        text-align: center;
-        background-color: rgb(255, 193, 7);
-        width: 200px;
-        font-family: Verdana, Geneva, Tahoma, sans-serif;
-        opacity: 0;
-      }
-
-      .names-bank .score {
-        overflow: hidden;
-        height: 0;
-      }
-
-      .answer-page .names-bank .score {
-        height: auto;
-        display: block;
-        opacity: 1;
-        transition: opacity 1.2s 0.2s;
-        padding: 20px;
-      }
-
-      .name {
-        width: 230px;
-        min-height: 36px;
-        border-radius: 2px;
-        background-color: lightgrey;
-        padding: 8px 12px 2px;
-        box-sizing: border-box;
-      }
-
-      .card .name {
-        border-radius: 0 0 5px 5px;
-      }
-
       #submit {
         margin-top: 10px;
         padding: 8px 20px;
@@ -161,108 +52,58 @@
         background-color: rgb(0, 146, 156);
       }
 
-      #newGame {
-        padding: 8px 20px;
-        background-color: lightpink;
-        border: none;
-        position: absolute;
-        top: 5px;
-        left: 20px;
-        border-radius: 3px;
-        font-size: 0.7em;
+      [type='radio'] {
+        display: none;
+      }
+
+      [type='radio'] + label.radio-label {
+        background: lightgrey;
+        display: block;
+        padding: 10px;
+        border-radius: 4px;
         cursor: pointer;
       }
 
-      #newGame:hover {
-        background-color: coral;
+      label.radio-label:hover {
+        background: darkgrey;
       }
 
-      .selected {
-        background-color: orange;
+      [type='radio']:checked + label.radio-label {
+        background: lightcoral;
       }
 
-      @media screen and (orientation: landscape) and (max-height: 680px) {
-        /* CSS applied when the device is in landscape mode*/
-        .names-bank {
-          padding: 0;
-          top: 0;
-          max-height: 100vh;
-          overflow: scroll;
-        }
-
-        body {
-          font-size: 20px;
-        }
-
-        .word-count {
-          font-size: 14px;
-        }
-
-        h1 {
-          margin-right: 240px;
-        }
+      .radio-label h3 {
+        margin: 0;
+        display: inline-block;
+        vertical-align: middle;
+        width: 220px;
       }
 
-      @media screen and (orientation: portrait) and (max-width: 1100px) {
-        body {
-          font-size: 1.8em;
-        }
+      .thumbnail {
+        display: inline-block;
+        vertical-align: middle;
+        width: 67px;
+        height: 48px;
+        margin-right: 4px;
+      }
 
-        .play-page {
-          flex-direction: column;
-        }
+      body {
+        padding: 70px 0 30px;
+      }
 
-        .names-bank {
-          flex-direction: row;
-          display: flex;
-          flex-wrap: wrap;
-          /* position: fixed; */
-          padding: 10px 10px 40px;
-          position: sticky;
-          top: 0;
-          z-index: 100;
-          background: white;
-        }
+      #addl-options {
+        position: absolute;
+        top: 30px;
+        right: 30px;
+        background-color: white;
+        padding: 10px;
+        cursor: pointer;
+        width: 200px;
+      }
 
-        .answer-page .names-bank {
-          min-width: 100%;
-          justify-content: center;
-        }
-
-        form {
-          margin: 0;
-        }
-
-        .names-bank .name {
-          margin: 6px;
-        }
-
-        .names-bank .score {
-          width: 0;
-        }
-
-        .answer-page .names-bank .score {
-          width: auto;
-        }
-
-        .word-count {
-          position: absolute;
-          margin-top: -20px;
-        }
-
-        .name {
-          width: 300px;
-        }
-
-        .card {
-          width: 300px;
-          background-size: 300px;
-          height: 266px;
-        }
-
-        .answer-page .card {
-          height: 454px;
-        }
+      #addl-options > summary {
+        list-style: none;
+        text-align: right;
       }
     </style>
   </head>
@@ -277,256 +118,86 @@
       ></iframe>
     </noscript>
     <!-- End Google Tag Manager (noscript) -->
-
-    <h1><span id="guess-type"></span>: <span id="round-number"></span></h1>
-
-    <div class="play-page">
-      <div
-        class="names-bank"
-        ondrop="returnDrop(event)"
-        ondragover="event.preventDefault()"
+    <h1>Magic the Guessering</h1>
+    <div class="play-page" style="justify-content: center">
+      <form
+        method="get"
+        action="guess.html"
+        style="display: flex; flex-direction: column; align-items: center"
       >
-        <div class="score">
-          YOUR SCORE
-          <div>Correct Answers This Round: <span id="score-amount"></span></div>
-          <div>
-            Correct Answers In Total: <span id="score-amount-total"></span>
-          </div>
-          <div>Overall Percent: <span id="score-percent"></span>%</div>
-        </div>
-        <div class="word-count"><span id="words-left"></span></div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-1"
+        <!-- <input type="radio" id="wrath" name="whichguesser" value="wrath" />
+        <label class="radio-label" for="wrath">
+          <img
+            class="thumbnail"
+            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/0/6/0619d670-7b53-4185-a25d-2fab5db1aab5.jpg?1562896185"
+          />
+          <h3>I'll Clean Sweep</h3></label
+        ><br /> -->
+
+        <input
+          type="radio"
+          id="counterspell"
+          name="whichguesser"
+          value="counterspell"
+          checked
+        />
+        <label class="radio-label" for="counterspell">
+          <img
+            class="thumbnail"
+            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/7/1/71cfcba5-1571-48b8-a3db-55dca135506e.jpg?1562843855"
+          />
+          <h3>Counterspell Guesser</h3></label
+        ><br />
+
+        <!-- <input type="radio" id="terror" name="whichguesser" value="terror" />
+        <label class="radio-label" for="terror">
+          <img
+            class="thumbnail"
+            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/2/d/2dd5d601-aff7-4b7a-ab6c-b89f403af076.jpg?1562905752"
+          />
+          <h3>I'm a Terror-able Guesser</h3></label
+        ><br /> -->
+
+        <input type="radio" id="burn" name="whichguesser" value="burn" />
+        <label class="radio-label" for="burn">
+          <img
+            class="thumbnail"
+            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/6/0/60b2fae1-242b-45e0-a757-b1adc02c06f3.jpg?1562760596"
+          />
+          <h3>Match With Hot Singles</h3></label
+        ><br />
+
+        <!-- <input type="radio" id="beast" name="whichguesser" value="beast" />
+        <label class="radio-label" for="beast">
+          <img
+            class="thumbnail"
+            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/3/3/33f7e788-8fc7-49f3-804b-2d7f96852d4b.jpg?1562905469"
+          />
+          <h3>Finding Fantastic Beasts</h3></label
         >
-          Name 1
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-2"
-        >
-          Name 2
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-3"
-        >
-          Name 3
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-4"
-        >
-          Name 4
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-5"
-        >
-          Name 5
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-6"
-        >
-          Name 6
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-7"
-        >
-          Name 7
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-8"
-        >
-          Name 8
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-9"
-        >
-          Name 9
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-10"
-        >
-          Name 10
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-11"
-        >
-          Name 11
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-12"
-        >
-          Name 12
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-13"
-        >
-          Name 13
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-14"
-        >
-          Name 14
-        </div>
-        <div
-          class="name"
-          draggable="true"
-          ondragstart="drag(event)"
-          onClick="selectName(event)"
-          id="name-15"
-        >
-          Name 15
-        </div>
-      </div>
-      <form onsubmit="toggleMode(event)">
-        <div class="cards-container">
-          <div
-            class="card"
-            ondrop="drop(event,1)"
-            ondragover="allowDrop(event,1)"
-            onclick="dropSelected(event, 1)"
-            id="card-1"
-          ></div>
-          <div
-            class="card"
-            ondrop="drop(event,2)"
-            ondragover="allowDrop(event,2)"
-            onclick="dropSelected(event, 2)"
-            id="card-2"
-          ></div>
-          <div
-            class="card"
-            ondrop="drop(event,3)"
-            ondragover="allowDrop(event,3)"
-            onclick="dropSelected(event, 3)"
-            id="card-3"
-          ></div>
-          <div
-            class="card"
-            ondrop="drop(event,4)"
-            ondragover="allowDrop(event,4)"
-            onclick="dropSelected(event, 4)"
-            id="card-4"
-          ></div>
-          <div
-            class="card"
-            ondrop="drop(event,5)"
-            ondragover="allowDrop(event,5)"
-            onclick="dropSelected(event, 5)"
-            id="card-5"
-          ></div>
-          <div
-            class="card"
-            ondrop="drop(event, 6)"
-            ondragover="allowDrop(event,6)"
-            onclick="dropSelected(event,6)"
-            id="card-6"
-          ></div>
-          <div
-            class="card"
-            ondrop="drop(event,7)"
-            ondragover="allowDrop(event,7)"
-            onclick="dropSelected(event, 7)"
-            id="card-7"
-          ></div>
-          <div
-            class="card"
-            ondrop="drop(event,8)"
-            ondragover="allowDrop(event,8)"
-            onclick="dropSelected(event, 8)"
-            id="card-8"
-          ></div>
-          <div
-            class="card"
-            ondrop="drop(event,9)"
-            ondragover="allowDrop(event,9)"
-            onclick="dropSelected(event, 9)"
-            id="card-9"
-          ></div>
-          <div
-            class="card"
-            ondrop="drop(event,10)"
-            ondragover="allowDrop(event,10)"
-            onclick="dropSelected(event, 10)"
-            id="card-10"
-          ></div>
-          <div
-            class="card"
-            ondrop="drop(event,11)"
-            ondragover="allowDrop(event,11)"
-            onclick="dropSelected(event, 11)"
-            id="card-11"
-          ></div>
-          <div
-            class="card"
-            ondrop="drop(event,12)"
-            ondragover="allowDrop(event,12)"
-            onclick="dropSelected(event, 12)"
-            id="card-12"
-          ></div>
-        </div>
-        <input type="submit" id="submit" value="Submit" />
+        <br /> -->
+
+        <details id="addl-options">
+          <summary>
+            <img
+              src="http://mythicspoiler.com/images/buttons/ustset.png"
+              style="width: 32px; vertical-align: top"
+            />
+            Options
+          </summary>
+          <input type="checkbox" name="digital" id="digital" checked />
+          <label for="digital">include digital cards</label>
+          <br />
+          <input type="checkbox" name="un" id="un" checked />
+          <label for="un">include un-cards</label>
+          <br />
+          <input type="checkbox" name="original" id="original" />
+          <label for="original">restrict to only original printing</label>
+        </details>
+        <input type="submit" id="submit" value="Play" />
       </form>
     </div>
 
-    <div style="position: absolute; top: 0; left: 0; right: 0; color: grey">
-      <form method="get" action="choose.html">
-        <input type="submit" id="newGame" value="New Game" />
-      </form>
-    </div>
     <div style="margin: -40px 0 0; height: 60px">
       <a href="https://paypal.me/idamayer">Donate, buy us a boba 🧋</a>
     </div>
