Update the style.

Fix 'start' bug.

views/index.css

@@ -1,47 +1,281 @@
-*{margin:0;padding:0;box-sizing:border-box;}
+/* Donut Bingo — "fits viewport, no scrolling" layout
+   This keeps EVERYTHING visible in the viewport by:
+   - using a fixed, non-scrolling page (overflow:hidden)
+   - giving the content a max height based on viewport
+   - sizing the bingo board by the *smaller* of available width/height
+   - making the inputs panel internally scroll-free by limiting how much it can take
 
-body, html{
-    height: 100%;
-    width: 100%;
+   Drop in and replace your current CSS.
+*/
+
+:root{
+  --bg0:#0b1020;
+  --bg1:#0f1730;
+  --panel: rgba(255,255,255,.06);
+  --panel2: rgba(255,255,255,.10);
+  --border: rgba(255,255,255,.14);
+  --text: rgba(255,255,255,.92);
+  --muted: rgba(255,255,255,.70);
+  --accent:#d4af37;
+  --accent2:#3a5a85;
+  --shadow: 0 14px 40px rgba(0,0,0,.35);
+  --r: 16px;
+  --r2: 12px;
+}
+
+*{margin:0;padding:0;box-sizing:border-box}
+
+/* Hard guarantee: no page scroll */
+html,body{
+  height:100%;
+  width:100%;
+  overflow:hidden;
 }
 
 body{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(1200px 600px at 18% 10%, rgba(212,175,55,.22), transparent 60%),
+    radial-gradient(900px 520px at 92% 18%, rgba(58,90,133,.26), transparent 58%),
+    linear-gradient(180deg, var(--bg0), var(--bg1));
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:flex-start;
+}
+
+/* Title + start button are a fixed "header band" */
+h1{
+  height: clamp(38px, 6vh, 54px);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  font-weight: 800;
+  letter-spacing: .2px;
+  font-size: clamp(20px, 2.6vh, 34px);
+  line-height: 1;
+  padding: 6px 10px 0;
+  text-shadow: 0 6px 18px rgba(0,0,0,.35);
 }
 
+#start{
+  height: clamp(34px, 5vh, 44px);
+  margin: 6px 0 10px;
+  padding: 0 16px;
+  font-size: clamp(12px, 1.8vh, 16px);
+}
+
+/* Main area must consume the rest of the viewport */
 .contents{
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    position: relative;
+  /* override your width/positioning */
+  position: relative;
+  width: min(1200px, 100vw);
+  flex: 1 1 auto;
+
+  /* no overflow, no scrolling */
+  overflow:hidden;
+
+  /* layout */
+  display:grid;
+  grid-template-columns: 300px 1fr;
+  gap: 14px;
+
+  /* padding kept small so it always fits */
+  padding: 10px 12px 14px;
+
+  /* critical: allow children to shrink */
+  min-height: 0;
+  min-width: 0;
 }
 
+/* Inputs panel */
 #inputs{
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    left: 35px;
-    top: 35px;
+  position: static; /* override your absolute */
+  display:flex;
+  flex-direction:column;
+  gap: 8px;
+
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 12px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(10px);
+
+  /* key: allow panel to shrink with viewport */
+  min-height: 0;
+}
+
+#inputs h2{
+  font-size: 12px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+#saveInputs{
+  height: 36px;
+  font-size: 13px;
+  width: 100%;
+}
+
+/* Inputs: compact to fit without scrolling */
+#inputs input{
+  height: 30px;
+  border-radius: 10px;
+  border: 1px solid rgba(255,255,255,.14);
+  background: rgba(0,0,0,.26);
+  color: var(--text);
+  padding: 0 10px;
+  outline: none;
+  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
+  min-width: 0;
+}
+
+#inputs input:focus{
+  border-color: rgba(212,175,55,.65);
+  box-shadow: 0 0 0 3px rgba(212,175,55,.16);
+  background: rgba(0,0,0,.20);
+}
+
+/* Buttons - shared */
+button{
+  appearance:none;
+  border: 1px solid rgba(255,255,255,.16);
+  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
+  color: var(--text);
+  border-radius: 12px;
+  font-weight: 800;
+  letter-spacing: .2px;
+  cursor: pointer;
+  box-shadow: 0 10px 24px rgba(0,0,0,.25);
+  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
+}
+
+button:hover{
+  border-color: rgba(255,255,255,.26);
+  filter: brightness(1.04);
+}
+
+button:active{
+  transform: translateY(1px);
+  box-shadow: 0 6px 16px rgba(0,0,0,.22);
+}
+
+#start{
+  border-color: rgba(212,175,55,.35);
+  background: linear-gradient(180deg, rgba(212,175,55,.30), rgba(212,175,55,.12));
+}
+
+/* Bingo panel */
+.bingo{
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 10px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(10px);
+
+  display:flex;
+  align-items:center;
+  justify-content:center;
+
+  /* critical: allow the table to scale down */
+  min-height: 0;
+  min-width: 0;
+  overflow:hidden;
 }
 
+/* Board sizing: use the available space without overflow.
+   The table becomes a square whose side is limited by:
+   - available width in the right column
+   - available height inside .contents
+*/
 table{
-    border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 8px;
+  table-layout: fixed;
+
+  /* Square that fits */
+  width: min(100%, calc((100vh - 110px) * 0.98));
+  height: min(100%, calc((100vh - 110px) * 0.98));
 }
 
+/* Cells */
 td{
-    height: 125px;
-    width: 125px;
-    border: 1px solid black;
-    position: relative;
+  position: relative;
+  border: 1px solid rgba(255,255,255,.14);
+  border-radius: var(--r2);
+  background: rgba(0,0,0,.22);
+  overflow:hidden;
+  text-align:center;
+  vertical-align:middle;
+  padding: 6px;
+  cursor:pointer;
+  box-shadow: 0 10px 22px rgba(0,0,0,.18);
+  transition: transform .10s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
 }
 
+td:hover{
+  transform: translateY(-1px);
+  border-color: rgba(212,175,55,.35);
+  background: rgba(0,0,0,.18);
+  box-shadow: 0 14px 30px rgba(0,0,0,.22);
+}
+
+td p{
+  display:-webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow:hidden;
+  text-overflow: ellipsis;
+  font-size: clamp(11px, 1.6vh, 18px);
+  line-height: 1.1;
+  font-weight: 800;
+  letter-spacing: .15px;
+  user-select:none;
+}
+
+/* Cross overlay */
 .cross{
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
+  position:absolute;
+  inset:0;
+  width:100%;
+  height:100%;
+  pointer-events:none;
+  opacity:.95;
+  filter: drop-shadow(0 6px 14px rgba(0,0,0,.30));
+}
+
+.cross path{
+  stroke: rgba(255, 64, 64, .85);
+  stroke-width: 2.6;
 }
+
+/* Responsive: stack panels, still no scrolling */
+@media (max-width: 880px){
+  .contents{
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
+  #inputs{
+    /* keep inputs compact; still no scrolling */
+    padding: 10px;
+  }
+  table{
+    width: min(100%, calc((100vh - 140px) * 0.98));
+    height: min(100%, calc((100vh - 140px) * 0.98));
+  }
+}
+
+/* If the viewport is extremely short, tighten gaps and spacing */
+@media (max-height: 720px){
+  h1{ height: 40px; font-size: 22px; padding-top: 4px; }
+  #start{ height: 34px; margin: 4px 0 8px; }
+  .contents{ gap: 10px; padding: 8px 10px 12px; }
+  table{ border-spacing: 6px; }
+  #inputs input{ height: 28px; }
+}
+

views/index.html

@@ -8,12 +8,14 @@
     <body>
         <h1>Donut Bingo</h1>
 
+        <button id="start">Start</button>
+
         <div class="contents">
             <div id="inputs">
                 <button id="saveInputs">Save</button>
+                <h2>Card Values</h2>
             </div>
 
-            <button id="start">Start</button>
             <div class="bingo">
                 <table>
                     <tbody id="tbody"></tbody>
@@ -22,7 +24,7 @@
         </div>
 
         <svg class="cross" id="cross" style="display:none" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000">
-            <path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="#ff0000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="#ff0000" stroke-opacity="0.75" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
         </svg>
 
         <script></script>

views/index.js

@@ -20,7 +20,6 @@ for(let i = 0; i < 5; i++){
     const tr = document.createElement("tr");
     for(let j = 0; j < 5; j++){
         const td = document.createElement("td");
-        if(i === 2 && j == 2) td.textContent = "Free";
         tr.appendChild(td);
         blocks.push(td);
     }
@@ -54,7 +53,10 @@ document.getElementById("start").addEventListener("click", ()=>{
     shuffle(inputs);
     const tds = document.querySelectorAll("#tbody td");
     for(let i = 0; i < tds.length; i++){
-        tds[i].textContent = inputs[i];
+        const p = document.createElement("p");
+        p.textContent = inputs[i];
+        if(tds[i].firstChild) tds[i].removeChild(tds[i].firstChild);
+        tds[i].appendChild(p);
     }
 });