Align Play with table deep links

src/RolemasterDb.App/wwwroot/app.css

@@ -268,6 +268,147 @@ pre,
     font-family: var(--font-mono);
 }
 
+.play-page,
+.play-hero,
+.play-hero-copy,
+.play-layout,
+.play-panel,
+.play-panel-header,
+.play-panel-copy,
+.play-result-dock,
+.play-result-card,
+.play-result-heading,
+.play-result-actions {
+    display: grid;
+    gap: 1rem;
+}
+
+.play-page {
+    gap: 1.25rem;
+}
+
+.play-hero {
+    gap: 1.25rem;
+    background:
+        radial-gradient(circle at top right, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 36%),
+        linear-gradient(180deg, color-mix(in srgb, var(--surface-card-subtle) 92%, var(--surface-1)), var(--surface-1));
+}
+
+.play-hero-copy {
+    gap: 0.65rem;
+    max-width: 58rem;
+}
+
+.play-eyebrow,
+.play-result-eyebrow {
+    margin: 0;
+    color: var(--accent-strong);
+    font-family: var(--font-ui);
+    font-size: 0.82rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+}
+
+.play-title {
+    margin: 0;
+    font-size: clamp(2.1rem, 4vw, 3.4rem);
+    line-height: 1;
+    max-width: 17ch;
+}
+
+.play-summary,
+.play-action-hint,
+.play-result-note {
+    margin: 0;
+    color: var(--text-secondary);
+}
+
+.play-hero-meta {
+    display: flex;
+    gap: 0.6rem;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.play-layout {
+    grid-template-columns: minmax(0, 1.7fr) minmax(19rem, 1fr);
+    align-items: start;
+}
+
+.play-panel {
+    align-content: start;
+    min-width: 0;
+}
+
+.play-panel-header {
+    gap: 0.5rem;
+}
+
+.play-panel-copy {
+    gap: 0.35rem;
+}
+
+.play-form-grid {
+    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+}
+
+.play-form-grid-primary {
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+}
+
+.play-action-row {
+    justify-content: space-between;
+}
+
+.play-result-dock {
+    padding-top: 0.1rem;
+}
+
+.play-result-card {
+    gap: 1rem;
+}
+
+.play-result-heading {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+    gap: 0.75rem;
+}
+
+.play-result-heading h3,
+.play-result-heading h4 {
+    margin: 0;
+}
+
+.play-result-actions {
+    align-items: center;
+    justify-items: end;
+}
+
+.play-action-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--control-height);
+    padding: 0.72rem 1rem;
+    border-radius: 999px;
+    border: 1px solid var(--button-secondary-border);
+    background: var(--button-secondary-bg);
+    color: var(--button-secondary-text);
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.play-action-link:hover {
+    background: var(--button-secondary-bg-hover);
+    color: var(--button-secondary-text);
+}
+
+.play-callout {
+    display: grid;
+    gap: 0.85rem;
+}
+
 .dashboard-grid {
     display: grid;
     gap: 1.25rem;
@@ -615,6 +756,30 @@ select.input-shell {
     margin-bottom: 0;
 }
 
+@media (max-width: 900px) {
+    .play-layout {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 640px) {
+    .play-title {
+        max-width: none;
+    }
+
+    .play-result-heading {
+        grid-template-columns: 1fr;
+    }
+
+    .play-result-actions {
+        justify-items: start;
+    }
+
+    .play-action-row {
+        justify-content: flex-start;
+    }
+}
+
 .critical-cell {
     display: flex;
     flex-direction: column;