.as-molen-app{
  --paper: #f7f2e7;
  --paper-2: #fffaf0;
  --ink: #24322b;
  --muted: #6d766f;
  --line: #395746;
  --accent: #b56d32;
  --accent-dark: #884b20;
  --white-stone: #f3ead7;
  --black-stone: #26342d;
  --board-size: min(86vw, 620px);
}
.as-molen-app, .as-molen-app *{ box-sizing: border-box; }
.as-molen-app{
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(180deg, #f4efe4 0%, #ebe2d3 100%);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.as-molen-app button{ font: inherit; }
.as-molen-app .game-shell{ width: min(920px, 100%); margin: 0 auto; padding: 30px 18px 45px; }
.as-molen-app .hero{ text-align: center; margin-bottom: 16px; }
.as-molen-app .eyebrow{ margin: 0; text-transform: uppercase; letter-spacing: .16em; color: var(--accent-dark); font-size: .72rem; font-weight: 800; }
.as-molen-app h1{ margin: 3px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.2rem, 7vw, 3.7rem); line-height: 1; }
.as-molen-app .subtitle{ margin: 7px 0 0; color: var(--muted); font-size: .95rem; }
.as-molen-app .panel{ width: var(--board-size); margin: 0 auto; }
.as-molen-app .top-panel{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.as-molen-app .player-card{ display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 11px; border: 1px solid #d5ccbb; border-radius: 13px; background: #fffaf0a8; opacity: .62; transition: .15s ease; }
.as-molen-app .player-card:last-child{ justify-self: end; flex-direction: row-reverse; text-align: right; }
.as-molen-app .player-card.active{ opacity: 1; border-color: #af8d65; box-shadow: 0 2px 12px #55452f14; }
.as-molen-app .player-card strong, .as-molen-app .player-card small{ display: block; }
.as-molen-app .player-card small{ margin-top: 1px; color: var(--muted); font-size: .72rem; }
.as-molen-app .turn{ color: var(--accent-dark); font-weight: 800; font-size: .82rem; white-space: nowrap; }
.as-molen-app .status{ width: var(--board-size); min-height: 45px; margin: 13px auto 7px; display: grid; place-items: center; text-align: center; color: #46544c; font-weight: 650; font-size: .92rem; line-height: 1.35; }
.as-molen-app .status.error{ color: #a53131; }
.as-molen-app .board-wrap{ width: var(--board-size); margin: auto; padding: clamp(9px, 2vw, 17px); border-radius: 18px; background: #cfb98e; box-shadow: 0 15px 38px #2e352f26, inset 0 0 0 1px #a8926b; }
.as-molen-app .board{ display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; background: radial-gradient(circle at 45% 37%, #f1deb7 0%, #e8cfa0 55%, #dabd87 100%); touch-action: manipulation; }
.as-molen-app .board-lines rect, .as-molen-app .board-lines line{ fill: none; stroke: var(--line); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.as-molen-app .point{ cursor: pointer; }
.as-molen-app .point .hit{ fill: transparent; }
.as-molen-app .point .node{ fill: #4e6c5a; transition: .13s ease; }
.as-molen-app .point:hover .node, .as-molen-app .point:focus .node{ fill: #2e4e3b; }
.as-molen-app .point.selected .node{ fill: #d4a43f; }
.as-molen-app .point.legal .node{ fill: #488d63; }
.as-molen-app .point.removable .node{ fill: #b35345; }
.as-molen-app .point.removable .piece{ stroke: #c62f2f; stroke-width: 10; filter: drop-shadow(0 0 6px #c62f2faa) drop-shadow(0 4px 3px #0005); }
.as-molen-app .stone{ display: inline-block; border-radius: 50%; }
.as-molen-app .sample{ width: 27px; aspect-ratio: 1; flex: 0 0 auto; box-shadow: 0 2px 4px #0004; }
.as-molen-app .white-stone{ background: radial-gradient(circle at 36% 28%, #fffdf7 0 22%, #efe3cd 55%, #cdbb9d 100%); border: 2px solid #665f54; }
.as-molen-app .black-stone{ background: radial-gradient(circle at 36% 28%, #58645d 0 10%, #303b35 45%, #19231e 100%); border: 2px solid #e9dfca; }
.as-molen-app .piece{ pointer-events: none; filter: drop-shadow(0 4px 3px #0005); }
.as-molen-app .piece.white{ fill: #f6eddc; stroke: #5f5a52; stroke-width: 5; }
.as-molen-app .piece.black{ fill: #26342d; stroke: #f0e5cf; stroke-width: 4; }
.as-molen-app .controls{ width: var(--board-size); margin: 17px auto 0; display: flex; justify-content: center; gap: 10px; }
.as-molen-app button{ border: 0; border-radius: 10px; padding: 10px 17px; background: var(--accent); color: white; font-weight: 750; cursor: pointer; box-shadow: 0 3px 0 var(--accent-dark); }
.as-molen-app button:hover{ filter: brightness(1.05); }
.as-molen-app button:active{ transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-dark); }
.as-molen-app button.secondary{ color: var(--ink); background: #f7edda; box-shadow: 0 3px 0 #c3ad89; border: 1px solid #d2bea0; }
.as-molen-app .rules{ width: var(--board-size); margin: 18px auto 0; padding: 17px 20px; border: 1px solid #d2c4ab; border-radius: 14px; background: var(--paper-2); box-shadow: 0 5px 18px #493b2712; }
.as-molen-app .rules h2{ margin: 0 0 7px; font-family: Georgia, serif; font-size: 1.18rem; }
.as-molen-app .rules ul{ margin: 0; padding-left: 21px; color: #53615b; line-height: 1.55; font-size: .9rem; }
.as-molen-app .dialog{ position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: #14251dd0; }
.as-molen-app .dialog[hidden]{ display: none; }
.as-molen-app .dialog-card{ width: min(90vw, 390px); padding: 26px; border-radius: 18px; background: #fffaf0; text-align: center; box-shadow: 0 20px 60px #0006; }
.as-molen-app .result-icon{ color: var(--accent); letter-spacing: .12em; font-size: 1.8rem; }
.as-molen-app .dialog h2{ margin: 9px 0 5px; font-family: Georgia, serif; font-size: 2rem; }
.as-molen-app .dialog p{ margin: 0 0 18px; line-height: 1.5; }
@media (max-width: 560px) {
  .as-molen-app .game-shell{ padding: 19px 10px 32px; }
  .as-molen-app .top-panel{ gap: 6px; }
  .as-molen-app .player-card{ padding: 6px 7px; gap: 5px; }
  .as-molen-app .sample{ width: 21px; }
  .as-molen-app .player-card small{ font-size: .62rem; }
  .as-molen-app .turn{ font-size: .7rem; }
  .as-molen-app .status{ font-size: .84rem; }
  .as-molen-app .rules{ padding: 14px 16px; }
}

/* 0.2.0: spelvormkeuze en online lobby */
.as-molen-app .mode-panel{ padding: 18px; border: 1px solid #d2c4ab; border-radius: 16px; background: #fffaf0c9; text-align: center; }
.as-molen-app .mode-panel h2{ margin: 0 0 14px; font-family: Georgia, serif; font-size: 1.25rem; }
.as-molen-app .mode-buttons{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.as-molen-app .online-setup{ margin-top: 16px; padding-top: 14px; border-top: 1px solid #dfd1b9; }
.as-molen-app .online-actions{ display: flex; flex-wrap: wrap; justify-content: center; align-items: end; gap: 9px; }
.as-molen-app .online-actions label{ display: grid; gap: 4px; text-align: left; font-size: .78rem; color: var(--muted); font-weight: 700; }
.as-molen-app .online-actions input{ width: 110px; padding: 9px 10px; border: 1px solid #cbb99a; border-radius: 9px; background: white; color: var(--ink); font: inherit; text-transform: uppercase; letter-spacing: .08em; }
.as-molen-app .online-note, .as-molen-app .room-info{ width: var(--board-size); margin: 10px auto 0; color: var(--muted); text-align: center; font-size: .82rem; line-height: 1.4; }
.as-molen-app .room-info{ font-weight: 700; color: var(--accent-dark); }
@media (max-width:560px) {
  .as-molen-app .mode-panel{ padding: 14px 10px; }
  .as-molen-app .mode-buttons button{ flex: 1 1 130px; }
  .as-molen-app .online-actions{ align-items: stretch; }
  .as-molen-app .online-actions > *{ flex: 1 1 100%; }
  .as-molen-app .online-actions input{ width: 100%; }
}

.as-molen-app { width:100%; margin:0; color:#24322b; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.as-molen-app .molen-title { margin:3px 0 0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.2rem,7vw,3.7rem); line-height:1; }
.as-molen-app [hidden] { display:none !important; }
.as-molen-app .mode-panel h3 { margin: 0 0 14px; font-family: Georgia, serif; font-size: 1.25rem; }
.as-molen-app .rules h3 { margin: 0 0 7px; font-family: Georgia, serif; font-size: 1.18rem; }
.as-molen-app .dialog h3 { margin: 9px 0 5px; font-family: Georgia, serif; font-size: 2rem; }