:root{color-scheme:light;--play-green:#166d63;--play-ink:#263c36;--play-muted:#62736d;--play-paper:#fff;--play-bg:#f6f8f5}
*{box-sizing:border-box}body{margin:0;background:var(--play-bg);color:var(--play-ink);font-family:var(--font-family)}button,select,a,summary{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button,a,summary{touch-action:manipulation}button{cursor:pointer}a{color:var(--play-green);text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #70b7a6;outline-offset:2px}button:disabled{opacity:.38;cursor:default}[hidden]{display:none!important}.play-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Keep the Fourhao home identity while reserving the playing page for the board. */
.simple-play #fourhao-site-header .site-header{--site-header-height:52px;position:relative;display:flex;min-height:52px;height:52px;padding:6px 18px;gap:0}.simple-play #fourhao-site-header .site-header-brand{min-height:36px}.simple-play #fourhao-site-header .site-header-brand img{width:174px}.simple-play #fourhao-site-header :is(.site-header-primary,.site-header-daily,.site-header-controls){display:none}.simple-play #fourhao-site-header .site-header-error{display:none}
.topbar{height:52px;max-width:680px;padding:6px 12px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:14px;position:relative;z-index:36}.brand{display:inline-flex;align-items:center;font-size:1.1rem;font-weight:600;color:var(--play-ink);white-space:nowrap}.simple-play .fourhao-wrapper-identity{border:0;padding:0;margin:0;min-width:0}.play-navigation{display:flex;align-items:center;gap:16px;font-size:.875rem;flex-shrink:0}.play-link,.play-more summary{min-height:38px;display:flex;align-items:center;color:#435d52;white-space:nowrap}.play-more{position:relative}.play-more summary{cursor:pointer;list-style:none;gap:4px}.play-more summary::-webkit-details-marker{display:none}.play-more summary::after{content:'⌄';font-size:.8rem}.play-more-menu{position:absolute;right:0;top:42px;z-index:40;min-width:174px;border:1px solid #d6e1da;border-radius:12px;background:white;box-shadow:0 9px 35px #2545371c;padding:6px}.play-more-menu button,.play-more-menu a{display:block;text-align:left;background:none;border:0;border-radius:6px;width:100%;padding:11px 13px;white-space:nowrap;font-size:.9rem;line-height:1.5;color:#314b3d}.play-more-menu button:hover,.play-more-menu a:hover{background:#eef6ef}
.simple-play-selectors{display:flex;align-items:center;gap:10px;min-width:0}.simple-play-selectors select{border:1px solid #d1ddd4;border-radius:7px;background:white;color:var(--play-ink);padding:5px 8px;font-size:.875rem;min-width:0;height:38px}#play-difficulty{width:84px;flex-shrink:0}.play-level-picker{display:flex;align-items:center;min-width:0;gap:3px}.play-level-picker select{width:156px;max-width:100%}.play-level-picker button{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:38px;padding:0;border:0;border-radius:7px;background:transparent;color:#446b54;font-size:1.65rem;line-height:1}.play-level-picker button:hover{background:#e7f0e7}
.simple-play-shell{width:min(100%,672px);padding:8px 12px 10px;margin:0 auto}.simple-play-board-panel{--board-max-size:600px;width:min(100%,var(--board-max-size));margin:auto}.simple-grid-wrap{width:100%;aspect-ratio:1;margin:auto;background:var(--play-paper);border:2px solid #425d4e;border-radius:2px;overflow:hidden}.play-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr))}.play-cell{position:relative;border:0;border-right:1px solid #c8d3cc;border-bottom:1px solid #c8d3cc;border-radius:0;background:var(--play-paper);padding:0;min-width:0;min-height:0;color:#207a66;display:flex;align-items:center;justify-content:center;font-family:var(--font-family);line-height:1;font-size:clamp(24px,calc(var(--board-max-size)/15),42px);font-weight:400;user-select:none}.play-cell:nth-child(9n){border-right:0}.play-cell:nth-last-child(-n+9){border-bottom:0}.play-cell.box-right,.play-cell:nth-child(9n+3),.play-cell:nth-child(9n+6){border-right:2px solid #708777}.play-cell.box-bottom,.play-cell:nth-child(n+19):nth-child(-n+27),.play-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #708777}.play-cell.given{font-weight:600;color:#35463d}.play-cell.peer{background:#f2f6f1}.play-cell.same-digit{background:#e8f3ea;color:#12624e}.play-cell.selected{background:#daeee2;box-shadow:inset 0 0 0 2px #397b5b;z-index:1}.play-cell.conflict{color:#ac3339;background:#fae9e8}.play-value{pointer-events:none}.play-cell-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));width:100%;height:100%;padding:2px;font-size:clamp(10px,calc(var(--board-max-size)/31),20px);line-height:1;font-weight:400;font-variant-numeric:tabular-nums;color:#466451}.play-cell-notes>span{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.simple-play-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0;font-size:.8125rem;line-height:1.4;color:#526456}.simple-play-meta #play-timer{margin-left:auto;font-variant-numeric:tabular-nums}.play-numbers{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}.play-number{border:1px solid #d3dfd5;background:white;border-radius:8px;min-width:0;height:44px;padding:0;color:#315d47;font-size:1.5rem;line-height:1.1;display:flex;align-items:center;justify-content:center}.play-number:hover{background:#eaf4eb;border-color:#8cb89c}.play-number:active{background:#dbeedd}.simple-play-actions{display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr 1.5fr 1fr;gap:4px;margin-top:5px}.simple-play-actions button{border:0;background:transparent;border-radius:7px;padding:8px 3px;min-height:38px;font-size:.875rem;line-height:1.2;color:#536a5c;display:flex;align-items:center;justify-content:center;white-space:nowrap}.simple-play-actions button:hover{background:#eaf3e9}.simple-play-actions [aria-pressed=true]{background:#dceee0;color:#155a3d}#play-auto-notes{background:#eaf3e9;color:#28684d}#play-clear-notes{color:#496856}.play-status{margin:4px 0 0;line-height:1.4;font-size:.8125rem;color:#496e54;text-align:center}.play-status:empty{display:none}.play-status.error,.play-status.is-error{color:#a63632}.simple-play .fourhao-games-return{display:none!important}.simple-play.is-complete .simple-grid-wrap{border-color:#34835a}
@media(min-width:900px){.simple-play:has(#fourhao-site-header) .topbar{height:52px;margin:-52px 16px 0 214px;max-width:none;padding:6px 12px;justify-content:center;gap:22px}}
@media(max-width:899px){.simple-play #fourhao-site-header .site-header{height:44px;min-height:44px;padding:4px 12px}.simple-play #fourhao-site-header .site-header-brand{min-height:34px}.simple-play #fourhao-site-header .site-header-brand img{width:164px}.topbar{height:48px;gap:8px;padding:4px 12px}.simple-play .fourhao-wrapper-identity,.topbar>.brand{display:none}.simple-play-selectors{flex:1;gap:8px}.play-level-picker{flex:1}.play-level-picker select{flex:1;width:130px}.play-navigation{gap:12px}.simple-play-shell{padding:4px 8px 10px}.play-cell-notes{padding:1px}}
@media(max-width:430px){#play-difficulty{width:68px;padding-inline:5px}.simple-play-selectors{gap:5px}.play-level-picker{gap:0}.play-level-picker button{width:26px}.play-level-picker select{width:110px;padding-inline:5px}.play-navigation{gap:10px}.play-numbers{gap:4px}.simple-play-meta{font-size:.75rem}.simple-play-actions{gap:2px}.simple-play-actions button{padding-inline:2px}}
@media(max-width:359px){.topbar{padding-inline:8px}.simple-play-shell{padding-inline:8px}.play-navigation{gap:7px;font-size:.8125rem}.simple-play-selectors select{font-size:.8125rem}#play-difficulty{width:62px}.play-level-picker button{width:23px}.play-level-picker select{width:96px}.simple-play-actions button{font-size:.8125rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
