diff --git a/docs/playground.css b/docs/playground.css index 15a6093..0d396e8 100644 --- a/docs/playground.css +++ b/docs/playground.css @@ -198,6 +198,87 @@ button:disabled { width: 100%; } +.challenge-panel { + border: 1px solid #d7dcd6; + border-radius: 10px; + margin-top: 12px; + overflow: hidden; +} + +.challenge-head { + align-items: center; + background: #eef1ec; + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: space-between; + padding: 8px 12px; +} + +.challenge-head span { + color: var(--ink-soft, #5a6b67); + font-size: 0.82rem; +} + +.challenge-board { + padding: 12px; +} + +.challenge-empty { + color: var(--ink-soft, #5a6b67); + font-size: 0.85rem; +} + +.challenge-verdict { + border-radius: 8px; + font-weight: 800; + margin-bottom: 10px; + padding: 8px 12px; +} + +.challenge-verdict.win { + background: #e3f3dc; + color: #2f6b1f; +} + +.challenge-verdict.lose { + background: #f7e6df; + color: #9a3d22; +} + +.challenge-verdict.tie { + background: #eef1ec; + color: #4a5b57; +} + +.challenge-table { + border-collapse: collapse; + font-size: 0.85rem; + width: 100%; +} + +.challenge-table th, +.challenge-table td { + border-bottom: 1px solid #e4e8e2; + padding: 5px 8px; + text-align: right; +} + +.challenge-table th:first-child, +.challenge-table td:first-child { + text-align: left; +} + +.challenge-table thead th { + color: var(--ink-soft, #5a6b67); + font-weight: 700; +} + +.challenge-table td.better { + background: #e3f3dc; + font-weight: 800; +} + .status-strip { display: grid; gap: 10px; diff --git a/docs/playground.html b/docs/playground.html index 0d3a6fa..d52e18e 100644 --- a/docs/playground.html +++ b/docs/playground.html @@ -124,6 +124,14 @@

Playground

+ +