.lu{--lu-gold: #FFC145;--lu-gold-lit: #FFE08A;--lu-gold-deep: #C98A12;--lu-magenta: #FF2E9A;--lu-magenta-lit: #FF8AC9;--lu-magenta-deep: #B8146C;--lu-hole: #0F0A1C;--lu-pad: 12px;--lu-gap: var(--sp-1);--lu-seam: var(--sp-1);--lu-frame: 10px;--lu-cap: 2.6rem;--lu-cell: min( calc((100cqi - 2 * var(--lu-pad) - 2 * var(--lu-frame) - (var(--lu-cols, 7) - 1) * var(--lu-seam)) / var(--lu-cols, 7)), var(--lu-cap) );--lu-ease: cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column;justify-content:center;gap:var(--sp-2);inline-size:100%;padding:var(--lu-pad);position:relative;isolation:isolate;color:#fff;font:500 15px/1.2 inherit;font-family:inherit;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.lu--tic-tac-toe{--lu-gap: 0px;--lu-seam: .01px;--lu-frame: 14px;--lu-cap: 5rem}@media(min-width:48rem){.lu--connect-four{--lu-cap: 3.3rem}.lu--tic-tac-toe{--lu-cap: 7rem}}.lu:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 55% at 50% -8%,color-mix(in srgb,var(--cat-board) 10%,transparent),transparent 70%),radial-gradient(ellipse 70% 40% at 50% 108%,color-mix(in srgb,var(--brand) 7%,transparent),transparent 70%)}.lu__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-2)}.lu__setting{display:flex;min-width:0}.lu__setting[hidden]{display:none}.lu__seg{min-width:0}.lu__seg .gk-seg__opt{min-width:0;overflow:hidden;text-overflow:clip}.lu__short{display:none}.lu__mid{display:flex;align-items:center;gap:var(--sp-2);min-height:48px}.lu__centre{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);text-align:center}.lu__score{display:inline-flex;align-items:center;gap:var(--sp-1);max-width:100%;font-weight:800;font-size:var(--fs-2);letter-spacing:-.01em}.lu__seat{display:inline-flex;align-items:center;gap:var(--sp-1);min-width:0;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-chip);color:var(--wash-6);transition:color .16s,background-color .16s,box-shadow .16s}.lu__seat>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu__seat b{font-variant-numeric:tabular-nums;font-size:var(--fs-3);color:#fff}.lu__seat.is-turn{color:#fff;background:var(--wash-2);box-shadow:var(--ring-inset)}.lu__seat.is-winner{color:#fff;background:var(--wash-3)}.lu__chip{flex:none;width:14px;height:14px;border-radius:50%;box-shadow:var(--e-sink),inset 0 1px 1px var(--wash-6),var(--card-shadow)}.lu__seat.is-gold .lu__chip{background:radial-gradient(circle at 38% 32%,var(--lu-gold-lit),var(--lu-gold) 55%,var(--lu-gold-deep))}.lu__seat.is-magenta .lu__chip{background:radial-gradient(circle at 38% 32%,var(--lu-magenta-lit),var(--lu-magenta) 55%,var(--lu-magenta-deep))}.lu__seat.is-turn.is-gold .lu__chip{box-shadow:var(--e-sink),inset 0 1px 1px var(--wash-6),0 0 0 3px color-mix(in srgb,var(--cat-board) 28%,transparent)}.lu__seat.is-turn.is-magenta .lu__chip{box-shadow:var(--e-sink),inset 0 1px 1px var(--wash-6),0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent)}.lu__dash{flex:none;width:10px;height:2px;border-radius:var(--r-sm);background:var(--wash-5)}.lu__status{margin:0;max-width:100%;font-size:var(--fs-1);font-weight:600;line-height:1.25;color:var(--wash-7)}.lu.is-busy .lu__status{color:var(--wash-6)}.lu__btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:44px;padding:0 var(--sp-3);border-width:1px;border-style:solid;border-color:var(--wash-4);border-radius:var(--r-sm);background:var(--wash-2);color:#fff;font:inherit;font-weight:700;font-size:var(--fs-1);white-space:nowrap;cursor:pointer;transition:background-color .12s,transform .12s var(--lu-ease)}.lu__btn:hover:not(:disabled){background:var(--wash-4)}.lu__btn:active:not(:disabled){transform:translateY(1px)}.lu__btn:disabled{opacity:.4;cursor:default}.lu__btn:focus-visible,.lu__board:focus-visible{outline:3px solid var(--lu-gold);outline-offset:3px}.lu__stage{display:flex;justify-content:center}.lu__board{position:relative;display:grid;grid-template-columns:repeat(var(--lu-cols, 7),var(--lu-cell));grid-auto-rows:var(--lu-cell);gap:var(--lu-gap);padding:var(--lu-frame);border-radius:var(--r-md);touch-action:manipulation;cursor:pointer}.lu.is-over .lu__board,.lu.is-busy .lu__board{cursor:default}.lu__cell{position:relative}.lu__lines{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none}.lu--connect-four .lu__board{background:linear-gradient(165deg,#4e3c94,#3a2b70 55%,#2a1e52);box-shadow:inset 0 1px 0 var(--wash-4),var(--e-sink),0 0 0 1px var(--scrim-2),var(--e-2)}.lu--connect-four .lu__cell{border-radius:50%;background:var(--lu-hole);box-shadow:var(--e-sink),inset 0 -1px 0 var(--wash-2)}.lu--connect-four .lu__cell.is-cursor{box-shadow:var(--e-sink),inset 0 0 0 2px var(--wash-4)}.lu--connect-four .lu__cell.is-target:after{content:"";position:absolute;inset:15%;border-radius:50%;border:2px dashed var(--wash-5)}.lu__disc{position:absolute;inset:7%;border-radius:50%;opacity:0;will-change:transform}.lu__disc:after{content:"";position:absolute;inset:24%;border-radius:50%;box-shadow:inset 0 0 0 2px var(--scrim-1),var(--e-sink),0 1px 0 var(--wash-3)}.lu__cell.is-a .lu__disc,.lu__cell.is-b .lu__disc,.lu__ghost .lu__disc{opacity:1}.is-gold .lu__disc{background:radial-gradient(circle at 38% 30%,var(--lu-gold-lit) 0%,var(--lu-gold) 42%,var(--lu-gold-deep) 100%);box-shadow:var(--e-sink),var(--bevel-top),var(--e-1)}.is-magenta .lu__disc{background:radial-gradient(circle at 38% 30%,var(--lu-magenta-lit) 0%,var(--lu-magenta) 42%,var(--lu-magenta-deep) 100%);box-shadow:var(--e-sink),var(--bevel-top),var(--e-1)}.lu__ghost{position:absolute;top:var(--lu-frame);left:var(--lu-frame);z-index:2;width:var(--lu-cell);height:var(--lu-cell);transform:translate(calc(var(--lu-col, 0) * (var(--lu-cell) + var(--lu-seam))));transition:transform .12s var(--lu-ease);pointer-events:none}.lu__ghost[hidden]{display:none}.lu__ghost .lu__disc{opacity:.6}.lu__ghost.is-full .lu__disc{opacity:.3;filter:grayscale(.7)}.lu--tic-tac-toe .lu__board{background:linear-gradient(165deg,#261c42,#170f2c);box-shadow:inset 0 1px 0 var(--wash-2),var(--ring-inset),var(--e-2)}.lu--tic-tac-toe .lu__cell:before{content:"";position:absolute;inset:9%;border-radius:var(--r-md);background:transparent;transition:background-color .12s}.lu--tic-tac-toe .lu__cell.is-pressed:before,.lu--tic-tac-toe .lu__cell.is-cursor:before{background:var(--wash-2)}@media(hover:hover){.lu--tic-tac-toe:not(.is-over):not(.is-busy) .lu__cell:not(.is-a):not(.is-b):hover:before{background:var(--wash-1)}}.lu__mark{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:11;stroke-linecap:round;filter:drop-shadow(0 2px 3px rgb(0 0 0 / .4))}.lu__cell.is-gold .lu__mark{stroke:var(--lu-gold)}.lu__cell.is-magenta .lu__mark{stroke:var(--lu-magenta)}.lu__hash{stroke:var(--wash-4);stroke-linecap:round}.lu.is-over .lu__cell:not(.is-win) .lu__disc,.lu.is-over .lu__cell:not(.is-win) .lu__mark{opacity:.38;transition:opacity .42s ease .2s}.lu.is-over .lu__cell.is-win.is-gold .lu__disc{box-shadow:var(--e-sink),var(--bevel-top),0 0 0 3px var(--wash-7),0 0 18px color-mix(in srgb,var(--cat-board) 70%,transparent)}.lu.is-over .lu__cell.is-win.is-magenta .lu__disc{box-shadow:var(--e-sink),var(--bevel-top),0 0 0 3px var(--wash-7),0 0 18px color-mix(in srgb,var(--brand) 70%,transparent)}.lu__winline{fill:none;stroke:#fff;stroke-linecap:round;opacity:.94}.lu__winline--gold{filter:drop-shadow(0 0 6px rgb(255 193 69 / .9)) drop-shadow(0 2px 3px rgb(0 0 0 / .5))}.lu__winline--magenta{filter:drop-shadow(0 0 6px rgb(255 46 154 / .9)) drop-shadow(0 2px 3px rgb(0 0 0 / .5))}@container (max-width: 27rem){.lu__setting{flex:1 1 0}.lu__setting[data-lu=level]{flex-grow:3}.lu__setting[data-lu=mode]{flex-grow:2}.lu__seg .gk-seg__opt{padding:0 var(--sp-1);font-size:var(--fs-1)}.lu__long{display:none}.lu__short{display:inline}.lu__btn{padding:0 var(--sp-2)}.lu__btn--new span{display:none}.lu__score{font-size:var(--fs-2)}.lu__seat{padding:var(--sp-1) var(--sp-2);gap:var(--sp-1)}}@container (min-height: 1px){.lu{--lu-chrome: 9.5rem;--lu-cell: min( calc((100cqi - 2 * var(--lu-pad) - 2 * var(--lu-frame) - (var(--lu-cols, 7) - 1) * var(--lu-seam)) / var(--lu-cols, 7)), calc((100cqh - var(--lu-chrome) - 2 * var(--lu-frame) - (var(--lu-rows, 6) - 1) * var(--lu-seam)) / var(--lu-rows, 6)), var(--lu-cap) )}.lu__stage{flex:1 1 auto;min-block-size:0;align-items:center}}@media(prefers-reduced-motion:reduce){.lu__ghost,.lu__seat,.lu__btn,.lu--tic-tac-toe .lu__cell:before{transition:none}.lu.is-over .lu__cell:not(.is-win) .lu__disc,.lu.is-over .lu__cell:not(.is-win) .lu__mark{transition:none}}
