/* Page-only presentation for /page/karty_online/101. */
.yc-game-article--101 .yc-game-play-hero { --yc-game-play-hero-accent: #f5c542; }
.yc-game-article--101 .yc-game-play-hero__media img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
.yc-101-variant-note { margin: var(--space-8) 0; padding: var(--space-5); border: 1px solid color-mix(in srgb, #d99a13 42%, var(--color-border)); border-radius: var(--radius-lg); background: color-mix(in srgb, #ffd84a 10%, var(--color-surface)); }
.yc-101-variant-note strong { display: block; margin-bottom: var(--space-2); color: #805400; font-size: calc(18px * var(--yc-font-scale)); }
.yc-game-article-body .yc-101-variant-note p { margin: 0; color: var(--color-text-muted); }
.yc-101-cards { margin: clamp(64px, 8vw, 100px) 0 var(--space-10); }
.yc-101-rules,.yc-101-penalties,.yc-101-strategy-section,.yc-101-compare { margin:clamp(64px,8vw,100px) 0; }
.yc-101-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.yc-101-card-grid article { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-4); min-width: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.yc-game-article-body .yc-101-card-grid h3 { margin: 0 0 var(--space-2); font-size: calc(18px * var(--yc-font-scale)); }
.yc-game-article-body .yc-101-card-grid p { margin: 0; color: var(--color-text-muted); font-size: calc(14px * var(--yc-font-scale)); }
.yc-101-examples { margin: clamp(64px, 8vw, 100px) 0; }
.yc-101-example-grid, .yc-101-strategy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.yc-101-score-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-3); margin:var(--space-5) 0; }
.yc-101-score-grid article { display:grid; align-content:start; gap:var(--space-2); min-width:0; padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); }
.yc-101-score-grid span { color:#8a5600; font-size:12px; font-weight:800; text-transform:uppercase; }
.yc-101-score-grid strong { font-size:calc(18px * var(--yc-font-scale)); }
.yc-game-article-body .yc-101-score-grid p { margin:0; color:var(--color-text-muted); font-size:calc(13px * var(--yc-font-scale)); }
.yc-101-example-grid article, .yc-101-strategy article { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.yc-101-example-grid article { display:grid; align-content:start; gap:var(--space-3); border-top:4px solid #d99a14; }
.yc-101-example-grid article>span { color:var(--color-text-muted); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.yc-101-example-grid strong { color: #8a5600; font-size: calc(18px * var(--yc-font-scale)); }
.yc-101-example-grid article>b { align-self:end; padding-top:var(--space-3); border-top:1px solid var(--color-border); color:#17623f; font-size:calc(13px * var(--yc-font-scale)); }
.yc-game-article-body .yc-101-example-grid p, .yc-game-article-body .yc-101-strategy p { margin: var(--space-3) 0 0; color: var(--color-text-muted); }
.yc-101-strategy article { position:relative; padding-top:calc(var(--space-5) + 28px); }
.yc-101-strategy article>span { position:absolute; top:var(--space-4); left:var(--space-5); padding:4px 9px; border-radius:999px; background:#fff0bd; color:#704300; font-size:11px; font-weight:850; letter-spacing:.04em; }
.yc-101-compare { padding:clamp(24px,4vw,44px); border:1px solid color-mix(in srgb,#6848c6 24%,var(--color-border)); border-radius:var(--radius-xl); background:linear-gradient(135deg,color-mix(in srgb,#6848c6 7%,var(--color-surface)),var(--color-surface)); }
.yc-101-compare-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); margin-top:var(--space-5); }
.yc-101-compare-grid article { display:grid; gap:var(--space-2); padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-elevated); }
.yc-101-compare-grid strong { font-size:calc(22px * var(--yc-font-scale)); }
.yc-101-compare-grid span { color:#6848c6; font-size:12px; font-weight:800; text-transform:uppercase; }
.yc-game-article-body .yc-101-compare-grid p { margin:0; color:var(--color-text-muted); font-size:calc(14px * var(--yc-font-scale)); }
.yc-game-article-body .yc-101-related-title { margin:clamp(64px,8vw,96px) 0 var(--space-4); }
.yc-101-interface { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); align-items: center; gap: var(--space-6); margin: clamp(72px, 9vw, 112px) 0; padding: var(--space-6); border-radius: var(--radius-xl); background: linear-gradient(135deg, #183c33, #15304a); color: #fff; }
.yc-101-interface__copy > span { color: #ffd84a; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.yc-game-article-body .yc-101-interface h2 { margin: var(--space-2) 0 var(--space-3); color: #fff; }
.yc-game-article-body .yc-101-interface p { color: rgba(255,255,255,.82); }
.yc-101-interface figure { margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); background: #fff; }
.yc-101-interface figure picture { display:block; }
.yc-101-interface figure img { display: block; width: 100%; max-height:560px; object-fit:cover; object-position:center; border-radius: 0; }
.yc-game-article-body .yc-101-interface figcaption { padding: 10px 14px; color: rgba(255,255,255,.7); background: #102720; }
@media (max-width: 760px) {
  .yc-101-card-grid, .yc-101-example-grid, .yc-101-strategy, .yc-101-interface, .yc-101-compare-grid { grid-template-columns: 1fr; }
  .yc-101-score-grid { grid-template-columns:1fr 1fr; }
  .yc-101-card-grid article { grid-template-columns: 70px 1fr; padding: var(--space-4); }
  .yc-101-interface { padding: var(--space-4); }
}
@media (max-width: 420px) {
  .yc-101-card-grid article { grid-template-columns: 58px 1fr; gap: var(--space-3); }
  .yc-101-score-grid { grid-template-columns:1fr; }
}