Make join codes easy to copy

frontend/src/assets/css/admin.css

@@ -39,10 +39,28 @@
     min-width: 10.5rem;
     padding: 0.85rem 1.1rem 0.95rem;
     background: color-mix(in srgb, var(--accent) 12%, var(--well));
+    color: var(--text);
     border: 2px solid var(--accent);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-soft);
+    font: inherit;
     text-align: center;
+    cursor: pointer;
+    transition: var(--transition-smooth);
+}
+
+.admin-join-code:hover {
+    background: color-mix(in srgb, var(--accent) 20%, var(--well));
+    transform: translateY(-1px);
+}
+
+.admin-join-code:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
+    outline-offset: 2px;
+}
+
+.admin-join-code.copied {
+    border-color: var(--success);
 }
 
 .admin-join-code-label {
@@ -65,6 +83,13 @@
     letter-spacing: 0.16em;
 }
 
+.admin-join-code-hint {
+    display: block;
+    margin-top: 0.35rem;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+}
+
 @media (max-width: 600px) {
     .admin-summary {
         flex-direction: column;

frontend/src/assets/css/lobby.css

@@ -38,6 +38,11 @@
     margin-bottom: 0.5rem;
 }
 
+.lobby-join-code-item {
+    display: flex;
+    justify-content: center;
+}
+
 .copy-container {
     display: flex;
     gap: 0.5rem;