/* games.css — "Know the Game" hub and game pages: edge board, game cards, strategy chart, trainer, myths */

.edge-board { background: #FFFFFF; border: 1px solid #E3DDD2; border-radius: 16px; padding: 22px 22px 14px; margin: 26px 0; box-shadow: 0 8px 26px rgba(26, 35, 50, 0.07); }
.edge-board .edge-board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 2px solid #1A2332; padding: 0 0 10px; margin: 0 0 6px; }
.edge-board .edge-board-title { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; color: #1A2332; margin: 0; }
.edge-board .edge-board-stamp { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #8B94A3; margin: 0; }
.edge-board .edge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 11px 0; border-bottom: 1px solid #F0EBE2; }
.edge-board .edge-row:last-child { border-bottom: 0; }
.edge-board .edge-row-name { flex: 1 1 100%; display: flex; flex-direction: column; }
.edge-board .edge-row-game { font-size: 14px; font-weight: 800; color: #1A2332; }
.edge-board .edge-row-sub { font-size: 12px; line-height: 17px; color: #8B94A3; }
.edge-board .edge-row-bar { flex: 1 1 auto; height: 10px; background: #F4F0E8; border-radius: 5px; overflow: hidden; min-width: 120px; }
.edge-board .edge-bar-fill { display: block; height: 10px; border-radius: 5px; }
.edge-board .edge-best .edge-bar-fill { background: #168A50; }
.edge-board .edge-mid .edge-bar-fill { background: #F2A413; }
.edge-board .edge-avoid .edge-bar-fill { background: #E03131; }
.edge-board .edge-row-val { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; min-width: 92px; }
.edge-board .edge-row-num { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.edge-board .edge-best .edge-row-num { color: #168A50; }
.edge-board .edge-mid .edge-row-num { color: #B97D08; }
.edge-board .edge-avoid .edge-row-num { color: #C42525; }
.edge-board .edge-row-per { font-size: 11px; color: #8B94A3; }
.edge-board .edge-board-source { font-size: 11px; line-height: 16px; color: #8B94A3; border-top: 1px solid #F0EBE2; padding: 10px 0 0; margin: 8px 0 0; }

@media (min-width: 768px) {
  .edge-board .edge-row { flex-wrap: nowrap; }
  .edge-board .edge-row-name { flex: 0 0 320px; }
}

.game-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 22px 0 30px; }
.game-cards .game-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E3DDD2; border-radius: 16px; padding: 20px; box-shadow: 0 8px 26px rgba(26, 35, 50, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.game-cards .game-card:hover { transform: translateY(-3px); border-color: rgba(224, 49, 49, 0.45); box-shadow: 0 16px 36px rgba(26, 35, 50, 0.12); text-decoration: none; }
.game-cards .game-card-icon { display: inline-block; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center; background-size: contain; margin: 0 0 12px; }
.game-cards .game-card-name { font-size: 18px; font-weight: 800; letter-spacing: -0.2px; color: #1A2332; margin: 0 0 4px; }
.game-cards .game-card:hover .game-card-name { color: #C42525; }
.game-cards .game-card-edge { font-size: 14px; font-weight: 800; color: #168A50; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.game-cards .game-card-best { font-size: 13px; line-height: 19px; color: #5B6573; margin: 0 0 4px; }
.game-cards .game-card-learn { font-size: 12px; color: #8B94A3; margin: 0 0 12px; }
.game-cards .game-card-cta { font-size: 13px; font-weight: 800; color: #C42525; margin-top: auto; }

@media (min-width: 768px) {
  .game-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .game-cards { grid-template-columns: 1fr 1fr 1fr; }
}

.game-cards .gicon-cards { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='11' height='15' rx='2'/%3E%3Cpath d='M16 6.5l4.2 1.4-3.6 11-3.2-1'/%3E%3Cpath d='M8.5 9.2c-1.2-1.4-3.4-.4-3 1.3.3 1.3 1.8 2.3 3 3.1 1.2-.8 2.7-1.8 3-3.1.4-1.7-1.8-2.7-3-1.3z' fill='%23E03131' stroke='none'/%3E%3C/svg%3E"); }
.game-cards .gicon-wheel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2332' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 3v4.5M12 16.5V21M3 12h4.5M16.5 12H21M5.6 5.6l3.2 3.2M15.2 15.2l3.2 3.2M18.4 5.6l-3.2 3.2M8.8 15.2l-3.2 3.2'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23F2A413' stroke='none'/%3E%3C/svg%3E"); }
.game-cards .gicon-coup { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2332' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='9' height='14' rx='2'/%3E%3Crect x='12.5' y='5' width='9' height='14' rx='2'/%3E%3Cpath d='M7 14.5l-1.8-2.6L7 9.5l1.8 2.4z' fill='%23168A50' stroke='none'/%3E%3Cpath d='M17 14.5l-1.8-2.6L17 9.5l1.8 2.4z' fill='%23E03131' stroke='none'/%3E%3C/svg%3E"); }
.game-cards .gicon-dice { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2332' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='12' height='12' rx='2.5'/%3E%3Crect x='10' y='10' width='11' height='11' rx='2.5'/%3E%3Ccircle cx='6.5' cy='6.5' r='1.1' fill='%231A2332' stroke='none'/%3E%3Ccircle cx='11.5' cy='11.5' r='1.1' fill='%231A2332' stroke='none'/%3E%3Ccircle cx='13.2' cy='17.8' r='1.1' fill='%23E03131' stroke='none'/%3E%3Ccircle cx='17.8' cy='13.2' r='1.1' fill='%23E03131' stroke='none'/%3E%3Ccircle cx='17.8' cy='17.8' r='1.1' fill='%23E03131' stroke='none'/%3E%3C/svg%3E"); }
.game-cards .gicon-chip { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2332' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5' stroke='%23E03131'/%3E%3Cpath d='M12 3v3.5M12 17.5V21M3 12h3.5M17.5 12H21'/%3E%3C/svg%3E"); }
.game-cards .gicon-spiral { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2332' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 12m-1 0a1 1 0 102 0 2.5 2.5 0 10-5 0 5 5 0 1010 0 7.5 7.5 0 10-15 0'/%3E%3Cpath d='M4 19l16-14' stroke='%23E03131'/%3E%3C/svg%3E"); }

.gstat-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 24px 0; }
.gstat-row .gstat { background: #FFFFFF; border: 1px solid #E3DDD2; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(26, 35, 50, 0.06); }
.gstat-row .gstat-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: #8B94A3; margin: 0 0 4px; }
.gstat-row .gstat-value { font-size: 26px; line-height: 30px; font-weight: 800; letter-spacing: -0.5px; color: #1A2332; font-variant-numeric: tabular-nums; }
.gstat-row .gstat-sub { font-size: 12px; line-height: 17px; color: #5B6573; margin: 4px 0 0; }

@media (min-width: 768px) {
  .gstat-row { grid-template-columns: 1fr 1fr 1fr; }
}

.prose .game-steps { counter-reset: gstep; list-style: none; padding: 0; margin: 18px 0 26px; }
.prose .game-steps li { counter-increment: gstep; position: relative; padding: 0 0 14px 46px; font-size: 15px; line-height: 24px; color: #2A3344; }
.prose .game-steps li::before { content: counter(gstep); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: #1A2332; color: #F2C14E; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }

.bj-chart-block { background: #FFFFFF; border: 1px solid #E3DDD2; border-radius: 16px; padding: 20px; margin: 22px 0 30px; box-shadow: 0 8px 26px rgba(26, 35, 50, 0.07); }
.bj-chart-block .bj-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 2px solid #1A2332; padding: 0 0 10px; margin: 0 0 12px; }
.bj-chart-block .bj-chart-title { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; color: #1A2332; margin: 0; }
.bj-chart-block .bj-chart-stamp { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #8B94A3; margin: 0; }
.bj-chart-block .bj-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.bj-chart-block .bj-key { font-size: 11px; font-weight: 800; border-radius: 6px; padding: 4px 9px; }
.bj-chart-block .bj-chart-wrap { overflow-x: auto; }
.bj-chart-block .bj-chart { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 520px; margin: 0 0 16px; }
.bj-chart-block .bj-chart th { font-size: 11px; font-weight: 800; color: #FFFFFF; background: #1A2332; padding: 6px 4px; text-align: center; border-radius: 4px; }
.bj-chart-block .bj-chart th.bj-corner { text-align: left; padding-left: 8px; text-transform: uppercase; letter-spacing: 0.8px; background: #2A3852; }
.bj-chart-block .bj-chart th.bj-hand { background: #EFEAE0; color: #1A2332; font-size: 12px; }
.bj-chart-block .bj-chart td { text-align: center; font-size: 12px; font-weight: 800; padding: 6px 4px; border-radius: 4px; min-width: 28px; }
.bj-chart-block .cs-h { background: rgba(37, 99, 235, 0.14); color: #1D4FBE; }
.bj-chart-block .cs-s { background: rgba(22, 138, 80, 0.16); color: #0F6B3D; }
.bj-chart-block .cs-d { background: rgba(242, 164, 19, 0.22); color: #8A5E06; }
.bj-chart-block .cs-x { background: rgba(242, 164, 19, 0.4); color: #6E4A02; }
.bj-chart-block .cs-p { background: rgba(124, 58, 237, 0.14); color: #5B21B6; }
.bj-chart-block .bj-chart-note { font-size: 12px; line-height: 18px; color: #8B94A3; margin: 0 0 6px; }

.trainer { background: #1A2332; border-radius: 16px; padding: 24px; margin: 22px 0 30px; box-shadow: 0 12px 32px rgba(26, 35, 50, 0.25); }
.trainer .trainer-title { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; color: #FFFFFF; margin: 0 0 6px; }
.trainer .trainer-sub { font-size: 13px; line-height: 20px; color: #9AA5B8; margin: 0 0 16px; }
.trainer .trainer-stage { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 18px; }
.trainer .trainer-stage p { color: #E8ECF4; font-size: 14px; line-height: 21px; }
.trainer .trainer-stage a { color: #F2C14E; }
.trainer .trainer-deal { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #F2C14E; margin: 0 0 6px; }
.trainer .trainer-hand { font-size: 18px; font-weight: 800; color: #FFFFFF; margin: 0 0 14px; }
.trainer .trainer-options { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; }
.trainer .trainer-opt { display: inline-block; cursor: pointer; font-size: 14px; font-weight: 800; color: #FFFFFF; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 9px 20px; transition: background-color 0.15s ease, border-color 0.15s ease; }
.trainer .trainer-opt:hover { background: rgba(242, 193, 78, 0.18); border-color: #F2C14E; }
.trainer .trainer-opt.trainer-opt-right { background: rgba(22, 138, 80, 0.4); border-color: #2DBA74; }
.trainer .trainer-opt.trainer-opt-wrong { background: rgba(224, 49, 49, 0.35); border-color: #E03131; }
.trainer .trainer-opt.trainer-opt-done { cursor: default; }
.trainer .trainer-why { font-size: 14px; line-height: 22px; color: #E8ECF4; background: rgba(0, 0, 0, 0.25); border-left: 3px solid #F2C14E; border-radius: 0 8px 8px 0; padding: 12px 14px; margin: 14px 0 0; }
.trainer .trainer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 0; }
.trainer .trainer-score { font-size: 13px; font-weight: 700; color: #9AA5B8; }
.trainer .trainer-next { display: inline-block; cursor: pointer; font-size: 13px; font-weight: 800; color: #1A2332; background: #F2C14E; border-radius: 999px; padding: 9px 20px; }
.trainer .trainer-next:hover { background: #F9D97C; }

.myth-list { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 18px 0 30px; }
.myth-list .myth-item { background: #FFFFFF; border: 1px solid #E3DDD2; border-left: 4px solid #E03131; border-radius: 12px; padding: 16px 18px; }
.myth-list .myth-claim { font-size: 15px; font-weight: 800; color: #1A2332; margin: 0 0 6px; }
.myth-list .myth-verdict { font-size: 14px; line-height: 22px; color: #5B6573; margin: 0; }

@media (min-width: 1024px) {
  .myth-list { grid-template-columns: 1fr 1fr; }
}

.print-page .print-page-brand { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; color: #8B94A3; margin: 26px 0 6px; }
.print-page h1 { font-size: 28px; letter-spacing: -0.5px; margin: 0 0 16px; }
.print-page .print-page-actions { margin: 18px 0; }

@media print {
  .print-page header { display: none; }
  .print-page footer { display: none; }
  .print-page .print-page-actions { display: none; }
  .print-page .bj-chart-block { box-shadow: none; border: 1px solid #CCCCCC; }
}