.blokus-game { color:#253744; font-family:inherit; }
.blokus-game * { box-sizing:border-box; }
.blokus-game p,.blokus-game h2,.blokus-game h3,.blokus-game summary { color:#253744; }
.blokus-game .bd-shell { position:relative; max-width:1120px; margin:auto; padding:12px; background:#fbf8ef; border:1px solid #b8c9cc; border-radius:14px; }
.blokus-game .bd-heading,.blokus-game .bd-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
.blokus-game h2 { margin:0; font-size:1.5rem; }
.blokus-game .bd-heading span { font-size:.78rem; }
.blokus-game .bd-toolbar { margin-top:8px; font-size:.82rem; }
.blokus-game .bd-toolbar>div { display:flex; gap:6px; }
.blokus-game button { min-height:36px; padding:6px 10px; background:#fffef9; color:#253744; border:1px solid #758e9b; border-radius:6px; font:inherit; font-size:.85rem; cursor:pointer; }
.blokus-game button:hover:not(:disabled) { background:#e7f1ee; }
.blokus-game button:disabled { opacity:.7; cursor:default; }
.blokus-game button[aria-pressed="true"] { outline:2px solid #234f70; outline-offset:1px; background:#e0eef5; }
.blokus-game button:focus-visible,.blokus-game [tabindex="0"]:focus-visible { outline:3px solid #146668; outline-offset:3px; }
.blokus-game .bd-rules { margin:8px 0; font-size:.84rem; line-height:1.35; }
.blokus-game .bd-play { display:grid; grid-template-columns:minmax(280px,420px) minmax(325px,1fr); gap:18px; align-items:start; justify-content:center; }
.blokus-game .bd-board { display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); grid-template-rows:repeat(14,minmax(0,1fr)); width:100%; aspect-ratio:1; border:2px solid #506f7c; background:#f0f1e8; touch-action:manipulation; }
.blokus-game .bd-cell { position:relative; display:flex; align-items:center; justify-content:center; min-height:0; min-width:0; border:1px solid #b8c6c4; color:#233d4c; font-size:11px; user-select:none; }
.blokus-game .bd-side-1 { background:#b7d4e8; border-color:#4b7695; }
.blokus-game .bd-side-2 { background:repeating-linear-gradient(45deg,#f4d29a 0 3px,#fbe3bd 3px 6px); border-color:#9e753b; }
.blokus-game .bd-start { font-size:10px; color:#354f61; font-weight:800; }
.blokus-game .bd-cell.bd-cursor { outline:3px solid #101e2c; outline-offset:-3px; z-index:2; }
.blokus-game .bd-cell.bd-preview-valid { background:#b9e3c9; box-shadow:inset 0 0 0 2px #226147; }
.blokus-game .bd-cell.bd-preview-invalid { background:#f4c8cb; box-shadow:inset 0 0 0 2px #8a2840; }
.blokus-game .bd-preview-mark { color:#142b33; font-style:normal; font-weight:900; position:absolute; font-size:14px; }
.blokus-game .bd-cursor-text { margin:5px 0 0; font-size:.78rem; }
.blokus-game h3 { margin:0 0 8px; font-size:.94rem; }
.blokus-game h3 span { font-weight:400; font-size:.78rem; }
.blokus-game .bd-tray { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.blokus-game .bd-piece { display:flex; flex-direction:column; align-items:center; justify-content:space-between; min-width:0; height:76px; min-height:76px; padding:5px 2px 4px; }
.blokus-game .bd-piece:disabled { opacity:.7; }
.blokus-game .bd-mini { display:grid; gap:1px; height:49px; align-content:center; justify-content:center; }
.blokus-game .bd-mini i { background:#a9cde1; border:1px solid #42677c; }
.blokus-game .bd-piece b { font-size:11px; line-height:1; }
.blokus-game .bd-controls { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0; }
.blokus-game .bd-score { margin:8px 0 5px; font-size:.88rem; }
.blokus-game .bd-small,.blokus-game .bd-rewards { font-size:.78rem; line-height:1.35; margin:6px 0; }
.blokus-game .bd-status { min-height:1.6em; margin:7px 0; font-weight:650; font-size:.9rem; }
.blokus-game .bd-help { font-size:.8rem; }
.blokus-game .bd-help summary { cursor:pointer; padding:3px 0; }
.blokus-game .bd-help p { line-height:1.5; }
.blokus-game .bd-confirm { position:absolute; z-index:5; inset:0; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:12px; padding:28px; background:rgba(251,248,239,.98); border:3px solid #42677c; border-radius:14px; }
.blokus-game .bd-confirm p { flex-basis:100%; text-align:center; }
@media (max-width:800px) { .blokus-game .bd-play { grid-template-columns:minmax(0,420px); } .blokus-game .bd-tray-panel { width:100%; } .blokus-game .bd-heading span { flex-basis:100%; } }
@media (max-width:400px) { .blokus-game .bd-tray { grid-template-columns:repeat(5,minmax(0,1fr)); } .blokus-game .bd-piece { height:72px;min-height:72px; } }