Styling

src/App.css

@@ -1,8 +1,8 @@
 .flashcard-app {
   width: 100%;
   margin: 0 auto;
-  padding: 28px 12px;
-  height: 100svh;
+  padding: 10px 2px;
+  /*height: 100svh;*/
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -107,7 +107,7 @@
     color: var(--accent);
     text-decoration: none;
     font-size: 14px;
-    line-height: 1.4;
+    line-height: 1.1;
 
     &:hover {
       text-decoration: underline;
@@ -395,7 +395,7 @@
 }
 
 .btn-nav {
-  padding: 10px 24px;
+  padding: 5px 12px;
   background: var(--code-bg);
   color: var(--text-h);
   border: 1px solid var(--border);
@@ -413,22 +413,30 @@
     outline: 2px solid var(--accent);
     outline-offset: 2px;
   }
+  &.btn-nav--active {
+    background: var(--accent-bg);
+    border-color: var(--accent-border);
+    color: var(--accent);
+  }
 }
 
 /* ── Footer ───────────────────────────────────────────── */
 
 .site-footer {
   margin-top: auto;
   padding: 12px 0 4px;
-  border-top: 1px solid var(--border);
+  /*border-top: 1px solid var(--border);*/
   font-size: 13px;
   color: var(--text);
   opacity: 0.7;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
 }
 
 .site-footer__icon {
-  margin: 0 0 6px;
+  margin: 0;
 }
 
 .site-footer__disclaimer-btn {

src/components/FlashcardSession.jsx

@@ -3,19 +3,21 @@ import {contrastColor} from "../utils/contrastColor";
 import {shuffle} from "../utils/shuffle";
 import ReactPlayer from 'react-player'
 import toast from "react-hot-toast";
+import Tippy from "@tippyjs/react";
 
 export function FlashcardSession({terms, cardColors, onBack, title, description}) {
     const [currentIndex, setCurrentIndex] = useState(0);
     const [localTerms, setLocalTerms] = useState(terms);
     const [localColors, setLocalColors] = useState(cardColors);
     const [termDrawerOpen, setTermDrawerOpen] = useState(false);
     const [isMobileHorizontal, setIsMobileHorizontal] = useState(false);
+    const [autoPlay, setAutoPlay] = useState(false);
     const selectRef = useRef(null);
 
     useEffect(() => {
         function check() {
             setIsMobileHorizontal(
-                window.innerWidth < 1024 && window.matchMedia('(orientation: landscape)').matches
+                window.innerWidth < 1424 && window.matchMedia('(orientation: landscape)').matches
             );
         }
         check();
@@ -102,6 +104,12 @@ export function FlashcardSession({terms, cardColors, onBack, title, description}
                             <button className="btn-nav" onClick={goPrev}>← Prev</button>
                             <button className="btn-nav" onClick={goNext}>Next →</button>
                             <button className="btn-nav" onClick={handleShuffle}>⇄ Shuffle</button>
+                            <Tippy key="autoplay" content={autoPlay ? 'Cancel Auto-Play' : 'Enable Auto-Play'} placement="top">
+                                <button
+                                    className={`btn-nav${autoPlay ? ' btn-nav--active' : ''}`}
+                                    onClick={() => setAutoPlay(p => !p)}
+                                >{autoPlay ? '⏸ Auto' : '▶ Auto'}</button>
+                        </Tippy>
                         </div>
                     </div>
                     <div className="fcs-landscape__video">
@@ -111,12 +119,20 @@ export function FlashcardSession({terms, cardColors, onBack, title, description}
                                     className="flashcard-video-iframe"
                                     title="ASL sign video"
                                     src={playbackUrl}
-                                    autoPlay={true}
+                                    autoPlay={autoPlay}
                                     controls={true}
+                                    playsinline={true}
                                     muted={true}
-                                    width="100%"
-                                    height="100%"
+                                    // width="100%"
+                                    // height="100%"
                                     onError={playbackError}
+                                    config={{
+                                        file: {
+                                            attributes: {
+                                                playsinline: true
+                                            }
+                                        }
+                                    }}
                                 />
                             ) : (
                                 <div className="flashcard-video-placeholder">
@@ -163,12 +179,20 @@ export function FlashcardSession({terms, cardColors, onBack, title, description}
                                 className="flashcard-video-iframe"
                                 title="ASL sign video"
                                 src={playbackUrl}
-                                autoPlay={true}
+                                playsinline={true}
+                                autoPlay={autoPlay}
                                 controls={true}
                                 muted={true}
                                 width="100%"
                                 height="100%"
                                 onError={playbackError}
+                                config={{
+                                    file: {
+                                        attributes: {
+                                            playsinline: true
+                                        }
+                                    }
+                                }}
                             ></ReactPlayer>
                         ) : (
                             <div className="flashcard-video-placeholder">
@@ -182,6 +206,12 @@ export function FlashcardSession({terms, cardColors, onBack, title, description}
                         <button className="btn-nav" onClick={goNext}>Next →</button>
                         <button className="btn-nav" onClick={handleShuffle}>⇄ Shuffle</button>
                         <button className="btn-nav btn-nav--terms" onClick={() => setTermDrawerOpen(true)}>📋 Terms</button>
+                        <Tippy key="autoplay" content={autoPlay ? 'Cancel Auto-Play' : 'Enable Auto-Play'} placement="top">
+                            <button
+                                className={`btn-nav${autoPlay ? ' btn-nav--active' : ''}`}
+                                onClick={() => setAutoPlay(p => !p)}
+                            >{autoPlay ? '🔁 Auto' : '⏸ Wait'}</button>
+                        </Tippy>
                     </div>
                 </div>
                 <div className={`term-drawer${termDrawerOpen ? ' term-drawer--open' : ''}`}>

src/components/TermInput.jsx

@@ -45,6 +45,7 @@ const webResources = [
     {url: "https://www.startasl.com/asl-dictionary/", description: "Free dictionary on Paid site with Phrases.", type: ""},
     {url: "https://asl.ms/", description: "ASL Finger Spell Comprehension Test", type: ""},
     {url: "https://www.signingsavvy.com/", description: "Sign Savvy", type: ""},
+    {url: "https://en.wikipedia.org/wiki/American_Sign_Language", description: "Wikipedia", type: ""},
 ];
 
 export function TermInput({onStart}) {

src/index.css

@@ -67,11 +67,11 @@ body {
   max-width: 100%;
   margin: 0 auto;
   text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
+  /*border-inline: 1px solid var(--border);*/
+  /*min-height: 100svh;*/
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
+  /*box-sizing: border-box;*/
 }
 
 h1,