@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:wght@700;800&family=Source+Sans+3:wght@500;600;700&display=swap');
:root { color: #2c1813; background: #e8d7b8; font-family: "Source Sans 3", sans-serif; } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; } button { font: inherit; } .page { min-height: 100vh; padding: 24px 14px; background: repeating-linear-gradient(90deg,rgba(88,49,25,.05) 0 1px,transparent 1px 11px), #d9c099; }.game { max-width: 980px; margin: 0 auto; padding: clamp(18px,4vw,34px); border: 5px solid #352019; border-radius: 20px; background: #f8efdc; box-shadow: 10px 11px 0 #352019; } header { display: flex; justify-content: space-between; align-items: start; gap: 18px; } .kicker { margin: 0 0 4px; color: #7a5542; font: 500 .69rem "DM Mono",monospace; letter-spacing: .08em; text-transform: uppercase; } h1 { margin: 0; font: 800 clamp(2.2rem,7vw,4rem)/.94 "Playfair Display",serif; letter-spacing: -.06em; } .new-game,.pass { padding: 8px 12px; border: 2px solid #352019; border-radius: 8px; color: #352019; background: #f8efdc; font-weight: 700; cursor: pointer; }.new-game:hover,.new-game:focus-visible,.pass:hover:not(:disabled),.pass:focus-visible { outline: none; background: #e3c984; }.turn-strip { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 22px 0 12px; padding: 11px 13px; border: 2px solid #b89565; border-radius: 10px; background: #fff8e9; }.turn-strip p { margin: 0; text-align: right; color: #62453a; font-size: .9rem; }.turn-dot { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border: 1px solid #352019; border-radius: 50%; }.turn-dot.ivory { background: #fff9e6; }.turn-dot.charcoal { background: #372a27; }
.scoreboard { display: grid; grid-template-columns: 1fr 1.35fr .8fr 1.35fr 1fr; gap: 8px; align-items: stretch; margin-bottom: 10px; }.score,.bar,.dice { min-height: 48px; display: grid; place-content: center; border: 2px solid #5a3829; border-radius: 8px; text-align: center; }.score span,.bar { font-size: .78rem; font-weight: 700; }.score strong { display: block; font: 700 1rem "DM Mono",monospace; }.ivory-score { background: #fff8e5; }.charcoal-score { color: #fff8e5; background: #4a3430; }.bar { cursor: pointer; background: #d8b57d; }.bar:not(:disabled):hover,.bar.selected { outline: 3px solid #c04c35; outline-offset: 1px; }.bar:disabled { opacity: .55; cursor: default; }.bar b { margin-left: 4px; }.dice { grid-template-columns: repeat(4,1fr); gap: 3px; padding: 4px; background: #7a392e; }.dice span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 5px; background: #fff6df; font: 700 .86rem "DM Mono",monospace; }.dice em { color: #ffe3b1; font-style: normal; }
.board { overflow: hidden; border: 7px solid #603c2a; border-radius: 11px; background: #bd8559; box-shadow: inset 0 0 0 3px #e3bc82; }.row { display: grid; grid-template-columns: repeat(12,1fr); min-height: 220px; }.point { position: relative; min-width: 0; padding: 22px 2px 5px; border: 0; border-right: 1px solid rgba(58,30,19,.45); color: #3a2119; cursor: pointer; background: linear-gradient(135deg,transparent 50%,#f2d3a0 50%) top/100% 86px no-repeat, #c89165; }.point:nth-child(even) { background: linear-gradient(45deg,transparent 50%,#71392d 50%) top/100% 86px no-repeat, #c89165; }.point.bottom { padding: 5px 2px 22px; background: linear-gradient(225deg,transparent 50%,#f2d3a0 50%) bottom/100% 86px no-repeat, #c89165; }.point.bottom:nth-child(even) { background: linear-gradient(315deg,transparent 50%,#71392d 50%) bottom/100% 86px no-repeat, #c89165; }.point:hover,.point:focus-visible,.point.selected { outline: 3px solid #e9a73d; outline-offset: -3px; z-index: 1; }.point:focus-visible { outline-color: #133e58; }.point-number { position: absolute; z-index: 1; top: 3px; left: 50%; transform: translateX(-50%); font: 500 .55rem "DM Mono",monospace; }.point.bottom .point-number { top: auto; bottom: 3px; }.checkers { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }.point.bottom .checkers { flex-direction: column-reverse; }.checkers i { display: block; width: min(3.6vw,34px); aspect-ratio: 1; margin: -3px 0; border: 2px solid #3c2924; border-radius: 50%; box-shadow: 0 2px 0 rgba(40,20,16,.35); }.point.ivory .checkers i { background: radial-gradient(circle at 34% 30%,#fffdf4,#e4d8bb); }.point.charcoal .checkers i { background: radial-gradient(circle at 34% 30%,#80615a,#2e2422); }.board-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 42px; padding: 6px 12px; border-top: 3px solid #603c2a; border-bottom: 3px solid #603c2a; color: #fff4d9; background: #553225; font: 500 .66rem "DM Mono",monospace; }.bear-off { padding: 5px 9px; border: 1px solid #f7dfad; border-radius: 6px; color: #4a2a20; background: #f7dfad; font-weight: 700; cursor: pointer; }.bear-off:disabled { opacity: .45; cursor: not-allowed; }.controls { display: flex; gap: 10px; justify-content: center; margin: 17px 0; }.roll { min-width: 140px; padding: 11px 20px; border: 3px solid #352019; border-radius: 9px; color: #fff8e9; background: #9f3f32; box-shadow: 3px 3px 0 #352019; font-weight: 700; cursor: pointer; }.roll:hover:not(:disabled),.roll:focus-visible { outline: none; transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #352019; }.roll:disabled,.pass:disabled { opacity: .45; cursor: not-allowed; } footer { color: #62453a; font-size: .85rem; line-height: 1.45; } footer strong { color: #352019; } @media (max-width:700px) { .game { border-width: 4px; box-shadow: 6px 7px 0 #352019; }.row { min-height: 174px; }.checkers i { width: min(5.7vw,29px); }.scoreboard { grid-template-columns: 1fr 1fr 46px; }.bar-charcoal { grid-column: 2; grid-row: 2; }.charcoal-score { grid-column: 3; grid-row: 2; }.dice { grid-column: 3; grid-row: 1; }.turn-strip { align-items: start; flex-direction: column; }.turn-strip p { text-align: left; }.board { border-width: 5px; } } @media (max-width:440px) { .page { padding: 12px 7px; }.game { padding: 16px 11px; }.row { min-height: 136px; }.checkers i { width: 20px; margin: -4px 0; border-width: 1px; }.point { padding-left: 0; padding-right: 0; }.point-number { font-size: .47rem; }.board-bar { padding: 5px 7px; }.board-bar span { font-size: .54rem; }.scoreboard { gap: 4px; }.score,.bar,.dice { min-height: 42px; }.dice span { width: 20px; height: 20px; }.controls { flex-direction: column; }.roll,.pass { width: 100%; } }