/* strategy-games.de — game and tool styles */

.lead { font-size: 1.05rem; color: #555; margin-bottom: 1.5rem; max-width: 70ch; }
.section-title { margin-top: 2rem; }

/* Hero tools section */
.hero-tools { margin-bottom: 2rem; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.tool-card { background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 1.2rem; text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s;
  display: block; }
.tool-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.08); border-color: var(--accent); text-decoration: none; }
.tool-card .tool-icon { font-size: 2rem; margin-bottom: .5rem; }
.tool-card h3 { margin: 0 0 .25rem; color: var(--accent); font-size: 1.1rem; }
.tool-card p { color: #555; font-size: .9rem; margin: 0; }

/* Generic game controls bar */
.game-controls { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  background: #f5f7fa; border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
.game-controls label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: #555; }
.game-controls select, .game-controls input { padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 4px; font-size: .95rem; }
.game-controls button { background: var(--accent); color: #fff; border: none; padding: .55rem 1.2rem; border-radius: 4px; cursor: pointer; font-weight: 600; }
.game-controls button:hover { background: var(--accent-h); }
.game-controls button.secondary { background: #ddd; color: #333; }

/* ========== Tic-Tac-Toe ========== */
.ttt-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  max-width: 360px; margin: 1rem auto; background: var(--border); padding: 6px; border-radius: 8px; }
.ttt-cell { aspect-ratio: 1; background: #fff; border: none; border-radius: 4px;
  font-size: 3rem; font-weight: 800; cursor: pointer; color: var(--accent);
  display: flex; align-items: center; justify-content: center; transition: background .15s; }
.ttt-cell:hover:not(:disabled) { background: #e8f0fe; }
.ttt-cell:disabled { cursor: default; }
.ttt-cell.filled.x { color: #d4504e; }
.ttt-cell.filled.o { color: #2e9e4d; }
.ttt-stats { text-align: center; color: #555; margin-bottom: 1rem; }
.ttt-status, .c4-status, .rv-status { text-align: center; padding: .75rem; font-size: 1.05rem;
  background: #f5f7fa; border-radius: 6px; margin: 1rem 0; }
.ttt-status.win, .c4-status.win, .rv-status.win { background: #d4edda; color: #155724; }
.ttt-status.loss, .c4-status.loss, .rv-status.loss { background: #f8d7da; color: #721c24; }
.ttt-status.draw, .c4-status.draw, .rv-status.draw { background: #fff3cd; color: #856404; }

/* ========== Vier in einer Reihe ========== */
.c4-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  max-width: 560px; margin: 1rem auto; background: #1a56d6; padding: 8px; border-radius: 8px; }
.c4-cell { aspect-ratio: 1; background: #fff; border: 3px solid #1a56d6; border-radius: 50%;
  cursor: pointer; transition: opacity .15s; padding: 0; }
.c4-cell:hover:not(:disabled) { opacity: .8; }
.c4-cell.p1 { background: #d4504e; }
.c4-cell.p2 { background: #f4d35e; }
.c4-cell:disabled { cursor: default; }
.c4-stats { text-align: center; color: #555; margin-bottom: 1rem; }

/* ========== Reversi ========== */
.rv-info { text-align: center; margin: 1rem 0; }
.rv-stats { display: inline-block; padding: .5rem 1.2rem; background: #f5f7fa; border-radius: 20px; font-weight: 600; }
.rv-board { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  max-width: 560px; margin: 1rem auto; background: #1a6b3a; padding: 8px; border-radius: 8px; }
.rv-cell { aspect-ratio: 1; background: #2e9e4d; border: none; cursor: pointer; padding: 4px;
  display: flex; align-items: center; justify-content: center; }
.rv-cell:hover:not(:disabled) { background: #3ab460; }
.rv-cell.hint { background: #4ec06e; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.rv-cell .disc { display: block; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.rv-cell.black .disc { background: #1a1a1a; }
.rv-cell.white .disc { background: #fff; }

/* ========== Würfel ========== */
.dice-input { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 1.5rem 0 1rem; }
.dice-input label { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 200px; }
.dice-input input { flex: 1; padding: .6rem; font-family: monospace; font-size: 1rem;
  border: 2px solid var(--border); border-radius: 4px; }
.dice-input input:focus { outline: none; border-color: var(--accent); }
.dice-input button { padding: .55rem 1.2rem; background: var(--accent); color: #fff;
  border: none; border-radius: 4px; cursor: pointer; font-weight: 600; }
.dice-input button.secondary { background: #ddd; color: #333; }
.dice-quick { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.dice-quick button { background: #fff; border: 1px solid var(--border); padding: .4rem .8rem;
  border-radius: 4px; cursor: pointer; font-family: monospace; font-size: .9rem; }
.dice-quick button:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.dice-result { background: linear-gradient(135deg, #fff8e8, #fff); border: 2px solid #f4d35e;
  border-radius: 12px; padding: 2rem; text-align: center; margin: 1.5rem 0; }
.dice-total { font-size: 5rem; font-weight: 800; color: var(--accent); line-height: 1;
  font-variant-numeric: tabular-nums; }
.dice-detail { color: #555; margin-top: .5rem; font-family: monospace; }

.dice-history { list-style: none; padding: 0; max-height: 400px; overflow-y: auto; }
.dice-history li { padding: .5rem .75rem; border-bottom: 1px solid var(--border);
  display: flex; gap: 1rem; align-items: center; font-family: monospace; font-size: .9rem; }
.dice-history li.empty { color: #999; font-style: italic; }
.dice-rolls { color: #888; flex: 1; }
.dice-time { color: #aaa; font-size: .8rem; }

/* ========== Skat / Doppelkopf form ========== */
.skat-form { background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 1.5rem; margin: 1rem 0; }
.skat-form h3 { margin: 1.2rem 0 .5rem; font-size: 1rem; color: var(--accent); }
.skat-form h3:first-child { margin-top: 0; }
.skat-form label { display: block; padding: .35rem 0; cursor: pointer; }
.skat-form input[type="number"] { padding: .35rem; border: 1px solid var(--border); border-radius: 4px; }
.skat-form .radio-group { display: flex; flex-wrap: wrap; gap: 1rem; }
.skat-form .radio-group label { padding: 0; }
.skat-form .hint { color: #888; font-size: .85rem; margin-top: -.4rem; }

.skat-result { background: linear-gradient(135deg, #e8f0fe, #fff); border: 2px solid var(--accent);
  border-radius: 12px; padding: 1.5rem; text-align: center; position: sticky; bottom: 1rem; }
.skat-value .label { display: block; font-size: .85rem; color: #666; text-transform: uppercase; letter-spacing: .05em; }
.skat-value .value { display: block; font-size: 4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.skat-value .value.positive { color: #2e9e4d; }
.skat-value .value.negative { color: #d4504e; }
.skat-formula { color: #555; font-size: .9rem; margin-top: .5rem; font-family: monospace; }

.skat-table { width: 100%; max-width: 480px; border-collapse: collapse; margin: 1rem 0; }
.skat-table th, .skat-table td { padding: .4rem .75rem; border-bottom: 1px solid var(--border); text-align: left; }
.skat-table th { background: #f5f7fa; font-weight: 600; }

/* ========== Timer ========== */
.timer-setup { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; }
.timer-setup h3 { margin: 1rem 0 .5rem; font-size: 1rem; }
.timer-setup h3:first-child { margin-top: 0; }
.timer-setup label { display: block; padding: .4rem 0; }
.timer-setup input { width: 100%; max-width: 300px; padding: .5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 1rem; }
.timer-setup input[type=number] { width: 100px; }
.timer-setup #t-names input { display: block; margin: .35rem 0; }
.timer-setup button.primary { background: var(--accent); color: #fff; border: none; padding: .75rem 1.5rem;
  border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 1rem; margin-top: 1rem; }

.timer-clocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.clock-card { background: #fff; border: 3px solid var(--border); border-radius: 12px;
  padding: 1.5rem; cursor: pointer; transition: all .2s; min-height: 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.clock-card.active { border-color: var(--accent); background: #e8f0fe; box-shadow: 0 4px 16px rgba(0, 115, 170, 0.25); }
.clock-card.dead { background: #fee; border-color: #d4504e; opacity: .6; }
.clock-name { font-weight: 600; color: #555; margin-bottom: .5rem; }
.clock-time { font-size: 2.5rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.timer-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.timer-controls button { padding: .6rem 1.2rem; background: var(--accent); color: #fff;
  border: none; border-radius: 4px; cursor: pointer; font-weight: 600; }
.timer-controls button.secondary { background: #ddd; color: #333; }

/* Misc */
pre { background: #f5f7fa; padding: .8rem 1rem; border-radius: 6px; overflow-x: auto;
  font-family: monospace; font-size: .9rem; }
code { background: #f5f7fa; padding: 0 .25em; border-radius: 3px; font-family: monospace; }