@font-face{font-family:Alegreya;src:url(/four-in-a-row/fonts/Alegreya.woff2) format("woff2");font-weight:400 900;font-display:swap}@font-face{font-family:Figtree;src:url(/four-in-a-row/fonts/Figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}:root{--ground: #d9cdb6;--room: radial-gradient(120% 60% at 50% 30%, #f1eadc 0%, #e4dac7 70%, #d9cdb6 100%);--ink: #2a2420;--muted: #6a5d50;--brown: #3b2a1e;--cream: #f6e9c8;--lead: #45494d;--lead-frame: #4a4d50;--stone: linear-gradient(#cdbfa6, #bbaa8c);--sill: linear-gradient(#d6c8ae, #b9a687);--sky: linear-gradient(180deg, #e3edf0 0%, #cfe0d2 45%, #a9c4a3 100%);--ripple: repeating-radial-gradient(circle, rgba(255, 255, 255, 0) 0 3px, rgba(255, 255, 255, .28) 4px, rgba(255, 255, 255, 0) 6px);--clear: radial-gradient(circle, rgba(255, 255, 255, .9) 0 8%, rgba(238, 244, 234, .5) 16%, rgba(214, 228, 214, .28) 60%, rgba(150, 176, 156, .45) 100%);--amber-mid: #e3a02a;--green-mid: #2f7549;--amber: radial-gradient(circle, #ffedb5 0 8%, #f4bc48 17%, var(--amber-mid) 55%, #c47f12 100%);--green: radial-gradient(circle, #cde9d1 0 8%, #4f9c6a 17%, var(--green-mid) 55%, #1c5533 100%);--amber-lit: radial-gradient(circle, #fffbea 0 14%, #ffe39a 32%, #f6c457 64%, #d9961d 100%);--green-lit: radial-gradient(circle, #f4fff2 0 14%, #9de0ae 30%, #5cbf7e 62%, #3c9a5e 100%);--f-voice: "Alegreya", Georgia, serif;--f-ui: "Figtree", system-ui, sans-serif;--cell: min(50px, calc((100vw - 32px - 32px - 12px) / 7));color-scheme:light}*{box-sizing:border-box}html{background:var(--ground)}body{margin:0;min-height:100%;background:var(--room);background-attachment:fixed;color:var(--ink);font:16px/1.4 var(--f-ui);-webkit-tap-highlight-color:transparent}#root{min-height:100%}button{font:inherit;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--brown);outline-offset:2px}.room{min-height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;position:relative}hub-bar{display:block}.play{flex:1;display:flex;flex-direction:column;padding-bottom:16px}.gamehead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px 16px 10px}.gamehead h1{margin:0 auto 0 0;font:800 26px/1 var(--f-voice);white-space:nowrap}.legend{display:flex;gap:14px;font:700 14px/1 var(--f-ui)}.legend>span{display:flex;align-items:center;gap:6px}.chip{width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;flex:none;border:2px solid var(--lead)}.chip.you{background:var(--ripple),var(--amber)}.chip.them{background:var(--ripple),var(--green)}.chip.empty{background:var(--ripple),var(--clear)}.chip .mark{width:12px;height:12px}.stage{display:flex;flex-direction:column;align-items:center}.window{--gap: 0px;--num-w: 18px;display:flex;flex-direction:column;align-items:center}.recess{position:relative;display:grid;grid-template-columns:var(--num-w) auto;grid-template-rows:20px auto;padding:6px 10px 10px 4px;background:var(--stone);border-radius:160px 160px 4px 4px/46px 46px 4px 4px;box-shadow:inset 0 3px 8px #3c281459,0 1px #f6f0e4}.colnums,.rownums{list-style:none;margin:0;padding:0;color:#5b4a37;font:700 12px/1 var(--f-ui);text-shadow:0 1px 0 #e8dcc4}.colnums{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(7,var(--cell));padding:0 6px;align-items:end}.colnums li{display:flex;flex-direction:column;align-items:center;gap:1px;padding-bottom:3px}.colnums svg{width:9px;height:9px;fill:currentColor;stroke:currentColor}.colnums .v2{color:#7a4b12}.colnums .v1{color:#5b4a37}.colnums .v0{color:#7d2f22}.rownums{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(6,var(--cell));padding:6px 0;align-items:center;text-align:center}.lead{grid-column:2;grid-row:2;position:relative;padding:3px;border:3px solid var(--lead);background:var(--sky);border-radius:4px}.glass{display:grid;grid-template-columns:repeat(7,var(--cell));grid-auto-rows:var(--cell)}.r{width:var(--cell);height:var(--cell);border-radius:50%;display:grid;place-items:center;border:3px solid var(--lead);background:var(--ripple),var(--clear);box-shadow:inset 0 0 0 1px #ffffff59,inset 0 0 7px #141e194d}.r.y{background:var(--ripple),var(--amber)}.r.c{background:var(--ripple),var(--green)}.r .mark{width:calc(var(--cell) * .44);height:calc(var(--cell) * .44)}.mark.sun{stroke:#5a3a0e;stroke-opacity:.8}.mark.moon{stroke:#e4f1e1;stroke-opacity:.9}.r.last{box-shadow:inset 0 0 0 1px #ffffff59,inset 0 0 7px #141e194d,0 0 0 2px #fff4cf}.r.mine{outline:3px dashed var(--brown);outline-offset:calc(var(--cell) * -.22)}.r.theirs{box-shadow:inset 0 0 0 1px #ffffff59,inset 0 0 0 calc(var(--cell) * .1) var(--brown)}.r.y.lit{background:var(--ripple),var(--amber-lit);box-shadow:inset 0 0 0 1px #ffffff80,0 0 14px 3px #ffe496d9}.r.c.lit{background:var(--ripple),var(--green-lit);box-shadow:inset 0 0 0 1px #ffffff80,0 0 14px 3px #beffc8cc}.r.c.lit .mark.moon{stroke:#1f5234;stroke-opacity:1}.r.faded{filter:saturate(.7) brightness(.92)}.fourline{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);pointer-events:none;overflow:visible}.fourline line{stroke:var(--brown);stroke-width:.13;stroke-linecap:round;stroke-opacity:.9}.sill{width:calc(100% + 2px);height:14px;background:var(--sill);border-radius:0 0 3px 3px;box-shadow:0 6px 10px #3c281440}.sill{position:relative}.sill .pools{position:absolute;inset:0 17px 0 calc(var(--num-w) + 10px + 1px);display:grid;grid-template-columns:repeat(7,1fr)}.sill .pools i{grid-row:1;justify-self:center;width:90%;height:160%;margin-top:-2px;border-radius:50%}.sill.amber .pools i{background:radial-gradient(closest-side,#fffbe6 0 22%,#ffcd64f2 48%,#ffcd6400)}.sill.green .pools i{background:radial-gradient(closest-side,#f2fff4 0 22%,#6ed78cf2 48%,#6ed78c00)}.cols{position:absolute;inset:3px;display:grid;grid-template-columns:repeat(7,var(--cell))}.col{all:unset;position:relative;cursor:pointer}.col:disabled{cursor:default}.col:focus-visible{outline:3px solid var(--brown);outline-offset:-2px;border-radius:6px}.ghost{position:absolute;left:0;width:var(--cell);height:var(--cell);bottom:calc(var(--row) * var(--cell));border-radius:50%;background:var(--amber);opacity:0;transition:opacity .12s}@media(hover:hover){.col:not(:disabled):hover .ghost{opacity:.45}}.window.mini{--cell: 18px}.window.mini .recess{grid-template-columns:auto;grid-template-rows:auto;padding:5px;border-radius:60px 60px 3px 3px/18px 18px 3px 3px}.window.mini .lead{grid-column:1;grid-row:1;padding:2px;border-width:2px}.window.mini .r{border-width:2px}.side{width:100%;padding:0 16px;display:flex;flex-direction:column;gap:14px}.owlpanel{margin-top:18px;padding:12px 14px;background:linear-gradient(160deg,#fbf8ee,#efeada);border:4px solid var(--lead-frame);border-radius:3px;box-shadow:inset 0 0 0 1px #8d9196;min-height:92px}.owlpanel.quiet{background:linear-gradient(160deg,#f4efe2,#e8e1cf)}.owlrow{display:flex;gap:12px;align-items:flex-start}.owl{flex:none;stroke:var(--brown)}.owl .quarry{stroke:var(--lead-frame)}.owl .face{fill:#e7dcc3}.owl .pupil{fill:var(--brown)}.owlpanel p{margin:0;font:500 17px/1.38 var(--f-voice)}.owlpanel h2{margin:2px 0 4px;font:800 13px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.owlpanel.end>p{margin-top:10px}.thinking{color:var(--muted);letter-spacing:.2em}.keys{display:none;margin:0;color:var(--muted);font-size:14px}.endbtns{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}.endcard hub-end-card{display:block}.bigbtn,.ghostbtn{all:unset;box-sizing:border-box;cursor:pointer;height:50px;display:grid;place-items:center;border-radius:3px;font:700 16px/1 var(--f-ui);text-align:center;padding:0 12px}.bigbtn{background:var(--brown);color:var(--cream)}.ghostbtn{background:#f6f0e2;box-shadow:inset 0 0 0 2px var(--lead-frame)}.bigbtn:focus-visible,.ghostbtn:focus-visible{outline:3px solid var(--brown);outline-offset:2px}.homebody{padding:22px 16px 26px;display:flex;flex-direction:column;gap:14px}.titlerow{display:flex;justify-content:space-between;align-items:center;gap:12px}.title{font:800 46px/.95 var(--f-voice);margin:0}.cont{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;background:var(--brown);color:var(--cream);border-radius:3px}.conttext{display:grid;gap:5px}.cont b{font:800 20px/1 var(--f-voice)}.conttext span{font-size:14px;opacity:.85}.chev{width:10px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.cont:focus-visible{outline:3px solid var(--brown);outline-offset:2px}.lbl{margin:8px 0 0;font:700 13px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.levels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.levels button{all:unset;box-sizing:border-box;cursor:pointer;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:22px 22px 3px 3px;background:#efe8d8;box-shadow:inset 0 0 0 2px var(--lead-frame);font:800 18px/1 var(--f-voice)}.levels button[aria-checked=true]{background:var(--cream);box-shadow:inset 0 0 0 3px var(--brown)}.levels button:focus-visible{outline:3px solid var(--brown);outline-offset:2px}.levelline{margin:0;font:500 16px/1.35 var(--f-voice);min-height:2.7em}.first{display:grid;grid-template-columns:1fr 1fr;gap:8px}.first button{all:unset;box-sizing:border-box;cursor:pointer;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:3px;background:#efe8d8;box-shadow:inset 0 0 0 2px var(--lead-frame);font:700 15px/1 var(--f-ui)}.first button[aria-checked=true]{background:var(--cream);box-shadow:inset 0 0 0 3px var(--brown)}.first button:focus-visible{outline:3px solid var(--brown);outline-offset:2px}.dim{position:fixed;inset:0;background:#2a1d1299;z-index:60}.sheet{position:fixed;left:50%;transform:translate(-50%);width:min(560px,100%);bottom:0;z-index:61;background:linear-gradient(160deg,#fbf8ee,#efeada);color:var(--ink);padding:22px 22px calc(26px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;border-top:4px solid var(--lead-frame)}.sheet h2{margin:0;font:800 26px var(--f-voice)}.sheet .row{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid #3b2a1e26}.sheet .row em{font-style:normal;font-weight:700;color:#7a4b12}.sheet .links{display:flex;gap:18px;font-size:14px;padding-top:14px;border-top:1px solid #3b2a1e26}.sheet .lbl{margin:2px 0 -2px}.sheet .links a{color:inherit}.sheet .done{justify-content:center;font-weight:700}.seg{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.seg button{all:unset;cursor:pointer;text-align:center;padding:10px 0;font:800 17px/1 var(--f-voice);border-radius:3px;box-shadow:inset 0 0 0 2px var(--lead-frame)}.seg button.on{background:var(--cream);box-shadow:inset 0 0 0 3px var(--brown)}@media(min-width:960px){:root{--cell: max(44px, min(80px, calc((100dvh - 280px) / 6)))}.room{max-width:1120px}.stage{flex-direction:row;align-items:flex-start;justify-content:center;gap:36px;padding:10px 24px 0}.side{width:340px;padding:0}.owlpanel{margin-top:30px}.keys{display:block}.colnums{font-size:15px}.colnums svg{width:12px;height:12px}.rownums{font-size:15px}.window{--num-w: 26px}.recess{grid-template-rows:28px auto}}@media(prefers-reduced-motion:no-preference){.r.last{animation:fall .26s cubic-bezier(.55,0,1,.45) both}}@keyframes fall{0%{transform:translateY(calc(var(--fall) * var(--cell) * -1))}}