.board-panel[data-game="link"]{justify-content:flex-start;gap:14px}
.link-heading{text-align:center}.link-kicker{display:inline-block;padding:5px 12px;border-radius:20px;background:#e7f0e5;color:#698674;font-size:10px;letter-spacing:2px}.link-heading h3{font-size:20px;margin:11px 0 7px;color:#5d756a}.link-heading p{font-size:12px;line-height:1.7;color:#8b9489}
.link-progress{display:flex;justify-content:space-between;flex-wrap:wrap;gap:9px;width:min(100%,460px);color:#8a8e81;font-size:11px}.link-progress b{color:#608d77}.link-progress>div{width:100%;height:7px;border-radius:8px;background:#e9eee4;overflow:hidden}.link-progress i{display:block;height:100%;border-radius:8px;background:#91b99f;transition:width .2s}
.link-board{position:relative;width:min(100%,480px);flex-shrink:0;background:#f1f4eb;border:1px dashed #c6d6c0;border-radius:19px;user-select:none}
.link-board-grid{position:absolute;inset:calc(100% * .3 / (var(--link-rows) + .6)) calc(100% * .3 / (var(--link-cols) + .6));display:grid;grid-template-columns:repeat(var(--link-cols),minmax(0,1fr));grid-template-rows:repeat(var(--link-rows),minmax(0,1fr))}
.link-slot{min-width:0;min-height:0;padding:3px;display:flex}.link-tile{width:100%;height:100%;padding:4px;display:flex;align-items:center;justify-content:center;background:#fffaf0;border:1px solid #dfdecf;border-radius:13px;box-shadow:0 3px 0 #d9dfd0;position:relative;touch-action:manipulation;transition:transform .12s,background .12s,box-shadow .12s}.link-tile .illustration{width:100%;height:100%;pointer-events:none}.link-tile[data-kind="2"],.link-tile[data-kind="6"]{background:#fff0df}.link-tile[data-kind="3"],.link-tile[data-kind="9"]{background:#f4ebdf}.link-tile[data-kind="4"],.link-tile[data-kind="7"]{background:#f3eafa}.link-tile[data-kind="5"]{background:#e5f0dd}.link-tile[data-kind="8"]{background:#fff5d8}
.link-tile:hover{transform:translateY(-2px);box-shadow:0 5px 0 #d3ddcd}.link-tile.selected{background:#dfeee5;border:2px solid #72a690;box-shadow:0 0 0 2px #b6d9c780;transform:translateY(-2px)}.link-tile.hinted{border:2px solid #a590bf;box-shadow:0 0 0 2px #d3c3e9}.link-tile.wrong{border-color:#d79785}.link-tile:focus-visible{outline:3px solid #806caa;outline-offset:2px;z-index:2}.link-tile:disabled{opacity:1;cursor:default;transform:none}.link-tile.link-matching{background:#fff1b9;box-shadow:0 0 0 2px #e4c775;border-color:#d8b458}.link-matching .illustration{opacity:.55}.link-empty{width:100%;height:100%;border-radius:13px;background:#e7eede80}
.link-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;fill:#bd984c;stroke:#bd984c;stroke-width:.065;stroke-linecap:round;stroke-linejoin:round}.link-lines polyline{fill:none;stroke-dasharray:1;animation:link-draw .38s ease-out both;filter:drop-shadow(0 0 .025px #fff4b9)}.link-hint-line{stroke:#9b82bc;fill:#9b82bc;stroke-width:.045}.link-hint-line polyline{stroke-dasharray:.035 .025;animation:none}
.link-tools{width:100%}.link-footnote{font-size:10px;line-height:1.7;text-align:center;color:#9a988b}.link-pause{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:380px;text-align:center}.link-pause>span{width:100px}.link-pause h3{font-size:21px;color:#728c79}.link-pause p{font-size:12px;line-height:1.8;color:#929787}.link-pause .primary-button{font-size:13px}
@keyframes link-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:760px){.board-panel[data-game="link"]{padding:12px 8px}.link-board{max-width:430px}.link-heading h3{font-size:19px}.link-tile{border-radius:9px;padding:2px}.link-slot{padding:2px}.link-tools .secondary-button{padding:9px 11px;min-height:42px}.link-footnote{font-size:10px}.link-progress{padding:0 5px}}
@media(max-width:360px){#game-content[data-game="link"] .game-heading{flex-direction:column;align-items:flex-start;gap:12px}.board-panel[data-game="link"]{padding:12px 4px}.link-heading p{font-size:10px}.link-tools{gap:5px}.link-tools .secondary-button{padding:8px;font-size:11px}.link-tools .icon{width:14px}}
