:root{font-synthesis:none;color:#000;--blue:#0078d4;--orange:#e66b25;--muted:#666;background:#fff;font-family:Gugi,sans-serif}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}button{appearance:none;touch-action:manipulation}html,body{overscroll-behavior:none;width:100%;height:100%;margin:0;overflow:hidden}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer;background:#f1f1f1;border:0;border-radius:0;padding:7px 6px}button:hover{background:#e4e4e4}button:disabled{opacity:.35;cursor:default}button:focus-visible{outline-offset:2px;outline:2px solid #202020}.quiet{color:var(--muted);background:0 0}.primary{background:var(--blue);color:#fff}.primary:hover{background:#0066b4}html,body,main{height:100%}main{width:100%;max-width:480px;height:100%;padding:max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));grid-template-rows:102px minmax(0,1fr) 32px 102px;gap:6px;margin:auto;display:grid;overflow:hidden}.player-panel{grid-template-rows:38px 64px;min-height:0;display:grid}.player-panel.inactive{opacity:.4}.player-panel[data-player="1"]{grid-template-rows:64px 38px}.score{justify-content:flex-start;align-items:center;gap:10px;height:100%;padding:10px 9px 0;display:flex}.player-panel[data-player="1"] .score{flex-direction:row-reverse}.score .name{font-size:18px;font-weight:400;position:relative}.score.active .name:before{content:"";border-top:6px solid;border-left:5px solid #0000;border-right:5px solid #0000;animation:.9s step-end infinite active-player-blink;position:absolute;top:-10px;left:50%;transform:translate(-50%)}@keyframes active-player-blink{0%,to{opacity:1}50%{opacity:0}}.score strong{font-size:22px;font-weight:400}.placement-points{color:#000;z-index:20;pointer-events:none;white-space:nowrap;-webkit-text-stroke:3px #fff;paint-order:stroke fill;font-size:24px;font-weight:400;line-height:1;position:fixed;transform:translate(-50%,-50%)}.board-area{min-width:0;min-height:0;position:relative}#result{color:#202020;z-index:2;background:#fff;border:1px solid #000;width:min(260px,100% - 32px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:5px 5px #0003}.result-titlebar{background:#f1f1f1;border-bottom:1px solid #000;padding:8px 12px;font-size:11px}#result-message{text-align:center;margin:0;padding:28px 16px;font-size:24px;font-weight:400}#play-again{border-radius:999px;margin:0 auto 20px;padding:8px 18px;font-size:12px;display:block}#board{touch-action:none;width:100%;height:100%;min-height:0;display:block}.cell,.zone,.placed,.piece svg polygon,.floating-piece polygon{stroke:#000;stroke-width:1px;stroke-linejoin:round;vector-effect:non-scaling-stroke}.cell,.zone{stroke:#fff}.cell{cursor:pointer}.lilac-region,.mix-lilac{fill:#c6a4ef}.sky-region,.mix-sky{fill:#8bd3f4}.cell.center-region{fill:url(#center-mix)}.zone{fill:none;pointer-events:none}.bonus-dots,.placed,.bonus-rainbow{pointer-events:none}.controls{justify-content:center;align-items:center;display:flex}.controls button{border-radius:999px;flex:none;min-width:0;padding:7px 16px;font-size:11px;line-height:16px}.controls .quiet{background:#f1f1f1}.controls .quiet:hover{background:#e4e4e4}.piece{background:0 0;flex-grow:0;flex-shrink:0;align-items:center;min-width:0;height:100%;min-height:0;padding:0;display:flex}.piece:is(button):hover{background:0 0}.piece-art{width:100%;display:block;position:relative}.piece svg{width:100%;height:100%;display:block;position:absolute;inset:0;overflow:visible}.piece .count{color:var(--piece-color);-webkit-text-stroke:3px #fff;paint-order:stroke fill;pointer-events:none;font-size:12px;font-weight:400;line-height:1;position:absolute;transform:translate(-50%,-50%)}#title-screen{padding:max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));background:#fff;grid-template-columns:minmax(0,1fr);place-items:center;display:grid;position:fixed;inset:0;overflow:hidden}.title-content{width:min(100%,432px);min-width:0}h1{letter-spacing:-1px;margin:15px 0;font-size:clamp(62px,16vw,90px);font-weight:400;line-height:1}.start-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.start-tile{background:var(--blue);color:#fff;text-align:left;aspect-ratio:1;flex-direction:column;justify-content:flex-end;width:100%;min-width:0;min-height:0;padding:clamp(10px,3vw,17px);display:flex}.start-tile:hover{background:#0066b4}.start-tile.second{background:var(--orange)}.start-tile.second:hover{background:#cb5717}.tile-number{margin-bottom:auto;font-size:clamp(32px,10vw,54px);font-weight:400;line-height:1}.tile-detail{font-size:11px}.resume{color:var(--blue);background:0 0;margin-top:14px;padding:12px 0;font-size:13px}.resume:hover{background:0 0;text-decoration:underline}.piece-display{touch-action:none;justify-content:center;gap:2px;height:64px;min-height:0;display:flex;position:relative;overflow:visible}.piece:disabled{opacity:1}.floating-piece{z-index:10;pointer-events:none;touch-action:none;width:100%;height:100%;display:none;position:fixed;inset:0;overflow:visible}.floating-piece.visible{display:block}.floating-piece polygon{pointer-events:auto;touch-action:none;cursor:grab}.practice-start{background:#c6a4ef;justify-content:space-between;align-items:center;gap:12px;width:100%;margin-top:12px;padding:18px 17px;font-size:20px;display:flex}.practice-start:hover{background:#b18bdc}.practice-start span{font-size:11px}#practice-menu h2{margin:12px 0;font-size:36px;font-weight:400}#practice-menu p{font-size:12px;line-height:1.5}#practice-progress{color:var(--muted)}#practice-boards{overscroll-behavior:contain;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-height:calc(100dvh - 230px);padding:4px;display:grid;overflow-y:auto}#practice-boards button{min-height:40px;font-size:14px}#practice-boards .cleared{background:#d6efda}.controls{gap:4px}.controls button{padding-left:10px;padding-right:10px}#practice-status{color:var(--muted);white-space:nowrap;font-size:10px}@font-face{font-family:Gugi;font-style:normal;font-display:swap;font-weight:400;src:url(./gugi-latin-400-normal-BtD2Ow2f.woff2)format("woff2"),url(./gugi-latin-400-normal-D_usynZU.woff)format("woff")}
