@@ -193,10 +193,10 @@
-
- {$t.structure}
+
+ {$t.structure}
{result.hand_structure}
-
+
{:else}
@@ -414,33 +414,47 @@
color: var(--warning);
}
- /* Dora */
- .dora-breakdown {
+ /* Dora - styled like yaku list */
+ .dora-list {
display: flex;
- flex-wrap: wrap;
- gap: var(--space-2);
+ flex-direction: column;
+ gap: 1px;
+ background: var(--border);
+ border: 1px solid var(--border);
}
.dora-item {
display: flex;
+ justify-content: space-between;
align-items: center;
- gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--bg-elevated);
- border: 1px solid var(--border);
+ }
+
+ .dora-name {
font-size: 0.8125rem;
+ color: var(--text-primary);
}
- .dora-count {
+ .dora-han {
+ font-size: 0.6875rem;
font-family: var(--font-mono);
font-weight: 600;
+ padding: var(--space-1) var(--space-2);
+ background: var(--accent-muted);
+ border: 1px solid var(--accent);
color: var(--accent);
}
- .dora-count.ura {
+ .dora-han.ura {
+ background: rgba(167, 139, 250, 0.15);
+ border-color: #a78bfa;
color: #a78bfa;
}
- .dora-count.aka {
+
+ .dora-han.aka {
+ background: rgba(248, 113, 113, 0.15);
+ border-color: var(--man-color);
color: var(--man-color);
}
@@ -488,23 +502,28 @@
}
/* Structure */
- .structure-section {
- font-size: 0.75rem;
- color: var(--text-muted);
- padding: var(--space-2) var(--space-3);
+ .structure-details {
background: var(--bg-elevated);
border: 1px solid var(--border);
- display: flex;
- gap: var(--space-2);
+ padding: var(--space-3);
}
- .structure-label {
- font-weight: 600;
+ .structure-details summary {
+ cursor: pointer;
+ font-size: 0.8125rem;
+ font-weight: 500;
+ color: var(--text-secondary);
+ }
+
+ .structure-details[open] summary {
+ margin-bottom: var(--space-2);
}
.structure-value {
font-family: var(--font-mono);
+ font-size: 0.75rem;
color: var(--text-secondary);
+ display: block;
}
/* Empty State */