style(display): allinea il design al controller e rendi più professionale

Il tabellone (display) usava blocchi di colore pieni e testo semplice, molto
diverso dallo stile scuro con card e accenti oro/blu del controller.
Riallinea la palette (#f5c518/#2196f3), la tipografia (Inter, grassetto,
maiuscolo) e i colori di stato connessione/time out, poi aggiunge dettagli da
tabellone reale (linea centrale, badge SET, bagliore sul punteggio, striscia
punti come pannello con bordo/ombra) senza toccare layout o struttura.

src/components/DisplayPage.vue

@@ -232,7 +232,8 @@ export default {
 .display-page {
   width: 100%;
   height: 100vh;
-  background: #000;
+  background: #111;
+  font-family: 'Inter', system-ui, sans-serif;
   overflow: hidden;
 }
 
@@ -255,7 +256,7 @@ export default {
 }
 
 .connection-status.disconnected {
-  background: rgba(255, 50, 50, 0.8);
+  background: #c62828;
   color: white;
   opacity: 1;
 }
@@ -268,11 +269,11 @@ export default {
 }
 
 .connected .dot {
-  background: #4caf50;
+  background: #2e7d32;
 }
 
 .disconnected .dot {
-  background: #f44336;
+  background: #ff6b6b;
   animation: blink 1s infinite;
 }
 
@@ -292,6 +293,8 @@ export default {
 
 .punt {
   font-size: 60vh;
+  font-weight: 900;
+  font-variant-numeric: tabular-nums;
   flex: 1;
   display: flex;
   justify-content: center;
@@ -320,10 +323,16 @@ export default {
 }
 
 .timeout-placeholder {
-  color: #fff;
+  color: #ff9800;
   font-size: 20vh;
   font-weight: 800;
   letter-spacing: 0.05em;
   text-transform: uppercase;
+  animation: timeout-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes timeout-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
 }
 </style>

src/style.css

@@ -46,11 +46,31 @@ button:focus-visible {
   width: 100%;
   display: table;
   color: #fff;
+  position: relative;
+}
+/* Linea centrale che separa i due campi, come un tabellone reale */
+.campo::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 2px;
+  background: rgba(255, 255, 255, 0.12);
+  pointer-events: none;
+  z-index: 1;
 }
 .hea {
   float: left;
   width: 50%;
   font-size: xx-large;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 18px 4px 12px;
+  box-sizing: border-box;
+  border-bottom: 3px solid currentColor;
+  opacity: 0.96;
 }
 .hea span {
 /* Bordo di debug: border: 1px solid #f3fb00; */
@@ -70,6 +90,27 @@ button:focus-visible {
   align-items: center;
   justify-content: center;
   vertical-align: middle;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.07);
+}
+.mr3, .ml3 {
+  display: inline-flex;
+  align-items: center;
+  font-size: 3vh;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 4px 16px;
+  margin-top: 8px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+.mr3 {
+  margin-right: 14px;
+}
+.ml3 {
+  margin-left: 14px;
 }
 .tal {
   text-align: left;
@@ -110,10 +151,11 @@ button:focus-visible {
   max-width: 50vw;
   overflow: hidden;
   box-sizing: border-box;
+  text-shadow: 0 0 40px currentColor;
 }
 .form {
   font-size: 5vh;
-  border-top: #fff dashed 25px;
+  border-top: 2px solid rgba(255, 255, 255, 0.18);
   padding-top: 50px;
 }
 .formtit {
@@ -125,14 +167,23 @@ button:focus-visible {
   font-size: 20vh;
   float: left;
   width: 32%;
+  box-sizing: border-box;
+  margin: 3px 0;
+  color: #ddd;
+  font-weight: 700;
+  background: rgba(255, 255, 255, 0.07);
+  border-radius: 10px;
+}
+.text-bold {
+  font-weight: 800;
 }
 .home {
-  background-color: black;
+  background-color: transparent;
-  color: yellow;
+  color: #f5c518;
 }
 .guest {
-  background-color: blue;
+  background-color: transparent;
-  color: white
+  color: #2196f3;
 }
 .striscia {
   position: fixed;
@@ -141,17 +192,28 @@ button:focus-visible {
   right: 10px;
   display: grid;
   grid-template-columns: max-content 1fr;
-  row-gap: 2px;
+  row-gap: 6px;
   align-items: center;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  backdrop-filter: blur(6px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  z-index: 2;
 }
 .striscia-nome {
   white-space: nowrap;
-  padding-right: 6px;
+  padding-right: 10px;
+  font-size: 2.2vh;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 .striscia-items {
   display: flex;
   flex-wrap: nowrap;
   overflow: hidden;
+  gap: 2px;
 }
 .striscia .item {
   width: 25px;
@@ -159,11 +221,17 @@ button:focus-visible {
   text-align: center;
   font-weight: bold;
   flex-shrink: 0;
-  border-radius: 5px;
+  border-radius: 6px;
 }
 .striscia .item:not(.item-vuoto) {
-  background-color: rgb(206, 247, 3);
+  background-color: #f5c518;
-  color: blue;
+  color: #111;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+}
+.striscia-items.guest-striscia .item:not(.item-vuoto) {
+  background-color: #2196f3;
+  color: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
 }
 
 .campo-config {