responsive!

src/index.css

@@ -45,7 +45,7 @@ img.bg {
   z-index: -1;
   filter: blur(20px);
 
-  &.revealed {
+  &.reveal {
     filter: none;
   }
 }
@@ -56,6 +56,7 @@ h1 {
   justify-content: center;
   margin-bottom: 10rem;
   word-spacing: 10px;
+  padding: 0 2rem;
 }
 
 .manacost {
@@ -82,7 +83,7 @@ h2 {
 }
 
 .cardbox {
-  width: 50rem;
+  max-width: 50rem;
   text-align: left;
   padding: 2rem;
   background-color: rgba(2, 9, 23, 0.8);
@@ -105,6 +106,35 @@ h2 {
   }
 }
 
+@media (max-width: 800px) {
+  .cardbox {
+    border-radius: 0;
+  }
+
+  main {
+    height: 100vh;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr 100px;
+
+    h1 {
+      margin-bottom: 0;
+      flex-direction: column;
+      gap: 2rem;
+    }
+
+    .actions {
+      justify-self: center;
+      align-self: center;
+
+      button {
+        font-size: 1.2rem;
+        padding: 1rem 0.8rem;
+      }
+    }
+  }
+}
+
 .actions {
   display: flex;
   gap: 1rem;

src/index.ts

@@ -22,14 +22,31 @@ document.body.appendChild(main);
 
 const cards = await loadCardData();
 
-type Format = 'hiragana' | 'katakana';
+type Format = 'hiragana' | 'katakana' | 'both';
 
-const render = (format: Format, card_id?: number) => {
+const render = (format: Format, reveal = false, card_id?: number) => {
   const index = card_id || Math.floor(Math.random() * cards.length);
   const randomCard = cards[index];
-  const cardImage = $el('img.bg', { src: scryfallURL(randomCard.id) });
-  const translate =
-    format === 'hiragana' ? convert_to_hiragana : convert_to_katakana;
+  const cardImage = $el('img', {
+    className: `bg ${format}`,
+    src: scryfallURL(randomCard.id),
+  });
+  const translate = (text: string) => {
+    if (reveal) {
+      return text;
+    }
+    switch (format) {
+      case 'hiragana':
+        return convert_to_hiragana(text);
+      case 'katakana':
+        return convert_to_katakana(text);
+      case 'both':
+        if (Math.random() > 0.5) {
+          return convert_to_hiragana(text);
+        }
+        return convert_to_katakana(text);
+    }
+  };
 
   main.remove();
   main = $el(
@@ -58,14 +75,14 @@ const render = (format: Format, card_id?: number) => {
         {
           type: 'button',
           '@click': () => {
-            cardImage.classList.toggle('revealed');
+            render(format, !reveal, index);
           },
         },
-        translate('Rivela'),
+        reveal ? 'Nascondi' : translate('Rivela'),
       ),
       $el(
         'button',
-        { type: 'button', '@click': () => render(format) },
+        { type: 'button', '@click': () => render(format, false) },
         translate('Nuova carta'),
       ),
       $el(
@@ -73,7 +90,11 @@ const render = (format: Format, card_id?: number) => {
         {
           type: 'button',
           '@click': () => {
-            render(format === 'hiragana' ? 'katakana' : 'hiragana', index);
+            render(
+              format === 'hiragana' ? 'katakana' : 'hiragana',
+              reveal,
+              index,
+            );
           },
         },
         format === 'hiragana'