:root{color-scheme:dark;--ink:#f5f0df;--muted:#a5b9ad;--gold:#e0bd7a;--line:#ffffff1b}*{box-sizing:border-box}body{margin:0;color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 25% 30%,#214438 0,transparent 57%),#0b1916;min-height:100vh}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid #708075;background:#223b31;color:var(--ink);border-radius:8px;padding:10px 16px;min-height:44px}button:hover{background:#345443;border-color:var(--gold)}button:disabled{opacity:.42;cursor:default}button.primary{background:var(--gold);border-color:var(--gold);color:#242619;font-weight:700}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffd984;outline-offset:3px}a{color:var(--ink)}main{max-width:1170px;margin:auto;padding:26px 34px}.masthead{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:20px;font-size:13px}.back{text-decoration:none}.brand{font-size:10px;letter-spacing:2.5px;color:var(--muted)}.title{display:flex;justify-content:space-between;align-items:center;margin:26px 0 20px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold);font-weight:600;margin:0 0 10px}h1{font:normal 62px/.95 Georgia,serif;margin:0;letter-spacing:-2px}h1 span{color:var(--gold);font-style:italic}h2{font:normal 27px/1.2 Georgia,serif;margin:0 0 12px}.layout{display:grid;grid-template-columns:minmax(0,680px) minmax(230px,1fr);gap:32px}.players{display:grid;grid-template-columns:1fr 32px 1fr;align-items:center;margin-bottom:16px}.player{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:12px 16px;border-radius:10px;background:#172e25;min-width:0}.player.active{border-color:var(--gold);box-shadow:inset 0 -3px var(--gold)}.player div{min-width:0}.player span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player small{display:block;color:var(--muted);font-size:9px;letter-spacing:2px}.player strong{font:32px Georgia,serif;margin-left:auto}.versus{text-align:center;color:var(--muted);font-size:10px}.mini{display:inline-block;width:30px;height:30px;border-radius:50%;flex-shrink:0;box-shadow:0 3px 4px #0009}.black{background:radial-gradient(circle at 34% 24%,#59605a 0%,#242a25 34%,#070b09 70%);border:1px solid #687269}.white{background:radial-gradient(circle at 35% 22%,#fffdf5 0,#ede8d8 58%,#b2aa96 100%);border:1px solid #fff9df}.frame{position:relative;padding:22px 25px 19px;background:repeating-linear-gradient(4deg,#0000 0 4px,#e4b8810b 5px,#0000 7px),linear-gradient(100deg,#4b2d1b,#a06c41 17%,#644126 42%,#91603a 74%,#3f271c);border-radius:15px;border:1px solid #b88852;box-shadow:inset 0 2px 2px #e7ba8177,inset 0 -5px 5px #0009,0 24px 45px #0006}.letters{display:flex;justify-content:space-around;word-spacing:0;font:10px/18px system-ui;color:#f8deb2;white-space:pre;text-align:center;letter-spacing:0;margin-top:-15px;margin-bottom:3px}.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:3px solid #1b2b1e;outline:1px solid #d4a56a66;box-shadow:0 0 7px #000c;overflow:hidden;background:radial-gradient(ellipse at 40% 20%,#397d5e,#174730);border-radius:3px}.row{display:contents}.cell{position:relative;aspect-ratio:1;min-height:0;min-width:0;padding:0;border:0;border-right:1px solid #071c1750;border-bottom:1px solid #071c1750;border-radius:0;background:transparent;display:flex;align-items:center;justify-content:center}.cell:hover{background:#ffffff0c}.cell:focus-visible{outline:3px solid #ffe09c;outline-offset:-4px;z-index:2}.cell .disc{width:79%;height:79%;border-radius:50%;box-shadow:0 4px 4px #0008,inset 0 0 0 3px #ffffff09;pointer-events:none}.cell.legal:after{content:"";width:14%;height:14%;border:1px solid #e3dfb99c;border-radius:50%;background:#d6e6ce39;position:absolute}.cell.last:before{content:"";position:absolute;z-index:1;bottom:4%;right:5%;height:5px;width:5px;background:var(--gold);border-radius:50%}.cell.hinted{background:#ffdc7c55;box-shadow:inset 0 0 0 3px #ffe099}.cell .coord{position:absolute;left:3px;top:0;font-size:9px;color:#d4e0cd99}.flip{animation:flip .34s ease-in-out both}.placed{animation:place .25s ease-out both}@keyframes flip{0%{transform:rotateY(0) scale(1)}45%{transform:rotateY(90deg) scale(1.1)}100%{transform:rotateY(180deg) scale(1)}}@keyframes place{from{transform:translateY(-15px) scale(.7);opacity:.2}to{transform:translateY(0) scale(1);opacity:1}}.engraving{text-align:center;color:#f6d9ad99;font-size:8px;line-height:10px;margin-top:7px;margin-bottom:-8px}.turnline{display:flex;gap:9px;align-items:center;min-height:60px;font-size:13px}.turnline p{flex:1;margin:10px 0}.live-dot{width:6px;height:6px;background:var(--gold);border-radius:50%;flex-shrink:0}#legalCount{color:var(--muted);font-size:11px;white-space:nowrap}.card{background:linear-gradient(135deg,#1f372b,#14281f);border:1px solid var(--line);border-radius:12px;padding:23px;margin-bottom:20px}.muted{color:var(--muted)}.small{font-size:12px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:24px}.preferences label{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:14px}input[type=checkbox]{accent-color:var(--gold);width:20px;height:20px}.signature{font:italic 18px Georgia,serif;color:#a6b89f;text-align:center;padding-top:6px}footer{text-align:center;color:#95a891;font-size:9px;letter-spacing:2px;padding:20px}footer span{padding:0 20px}#notice{color:#f4d79b;margin:0}dialog{max-width:480px;width:calc(100% - 28px);border:1px solid #7c8666;background:#162c23;color:var(--ink);padding:28px;border-radius:16px;box-shadow:0 30px 100px #000b;max-height:92dvh;overflow:auto}dialog::backdrop{background:#020e0bbd;backdrop-filter:blur(5px)}label{display:block;font-size:13px;margin:14px 0}input:not([type=checkbox]),select{display:block;width:100%;padding:10px;margin-top:6px;background:#0c2119;color:var(--ink);border:1px solid #6b8070;border-radius:6px;min-height:44px}.dialogActions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}[hidden]{display:none!important}#onlineInfo input{font-size:12px}#connection,#restartStatus{font-size:13px;color:var(--gold)}
@media(min-width:850px){aside{padding-top:3px}.board{max-height:61vh;max-width:61vh;margin:auto}.frame{max-width:calc(61vh + 50px);margin:auto}.letters{word-spacing:0}}
@media(max-width:800px){main{padding:16px}.layout{grid-template-columns:1fr;gap:10px;max-width:640px;margin:auto}.title{max-width:640px;margin:22px auto}.brand{display:none}h1{font-size:48px}.card{padding:18px;margin-bottom:12px}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.signature{display:none}.frame{padding:20px 17px 17px}.players{margin-bottom:12px}.player{padding:10px;gap:9px}.eyebrow{letter-spacing:1.3px}.title .eyebrow{font-size:8px}}
@media(max-width:460px){main{padding:10px}.masthead{padding:6px 0 10px}.title{margin:15px 0}h1{font-size:42px}.title button{font-size:13px;padding:8px 12px}.player{padding:8px}.player span{font-size:13px}.player strong{font-size:27px}.mini{width:24px;height:24px}.players{grid-template-columns:1fr 20px 1fr}.frame{padding:20px 12px 17px}.cell .coord{font-size:8px}.turnline{font-size:12px;min-height:54px}aside{display:block}.preferences{margin-top:10px}.preferences label{display:inline-flex;margin:4px 14px 4px 0}.card h2{font-size:23px}.actions{margin-top:12px;grid-template-columns:repeat(4,1fr);gap:5px}.actions button{padding:8px 4px;font-size:13px}.card .eyebrow{margin-bottom:6px}footer{padding:14px 0;font-size:8px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}dialog::backdrop{backdrop-filter:none}}