/* Material character lives at the edges. Game colours, dimensions and hit areas stay intact. */
:root{--mf-line:var(--accent,#977655);--mf-curve:18px;--mf-edge:solid;--mf-texture:linear-gradient(transparent,transparent)}
html[data-material=sand]{--mf-texture:radial-gradient(circle at 20% 60%,#bd915a35 0 1px,transparent 1.4px);--mf-curve:18px}
html[data-material=pixels]{--mf-curve:5px;--mf-edge:dashed;--mf-texture:repeating-linear-gradient(90deg,transparent 0 7px,#8a85d02b 7px 9px)}
html[data-material=moss]{--mf-curve:24px 17px 23px 16px;--mf-texture:repeating-linear-gradient(115deg,transparent 0 9px,#6d946b25 9px 10px)}
html[data-material=mosaic]{--mf-curve:12px;--mf-edge:dashed;--mf-texture:conic-gradient(from 35deg,#b8748e20,transparent 28%,#b8748e17 46%,transparent 70%)}
html[data-material=moire]{--mf-curve:18px;--mf-texture:repeating-linear-gradient(0deg,transparent 0 4px,#a37c5c28 4px 5px)}
html[data-material=venom]{--mf-curve:21px 16px 22px 17px;--mf-line:#203c4d;--mf-texture:linear-gradient(135deg,transparent 30%,#adc4d533 45%,#0c202b26 55%,transparent 70%)}
html[data-theme=dark][data-material=venom]{--mf-line:#abc8d8}
html[data-material] :where(.game-card,.modal,.aboba-result,.golf-aim-controls,.word-options,.radio-popover):not(:focus-visible){outline:1px var(--mf-edge) var(--edge);outline-offset:-2px;border-radius:var(--mf-curve)}
html[data-material] :where(.board-wrap,.number-board,.fifteen-board,.play-board,.mahjong-viewport,.golf-canvas){outline:1px var(--mf-edge) color-mix(in srgb,var(--mf-line) 35%,transparent);outline-offset:2px}
html[data-material=pixels] :where(.play-actions button,.game-top button,.actions button,.puzzle-actions button,.pad button,.direction-pad button,.word-keyboard button,.variant-switcher button,.mahjong-toolbar button,.golf-aim-controls button){border-radius:6px}
html[data-material=mosaic] :where(.play-actions button,.actions button,.puzzle-actions button,.pad button,.direction-pad button){border-style:dashed}
html[data-material=moire] :where(.score-card,.puzzle-stats>div,.scores>div,.golf-meta>div){border-bottom:2px double var(--mf-line)}
html[data-material=venom] :where(.game-card,.aboba-result,.modal){border-bottom-color:var(--mf-line);box-shadow:inset 0 -2px 0 #142a3330,0 12px 28px var(--shadow)}
#materialFeedbackLayer{position:fixed;inset:0;width:100%;height:100%;z-index:1100;pointer-events:none!important;overflow:hidden;contain:strict}
.mf-piece,.mf-press{position:absolute;display:block;pointer-events:none!important;will-change:transform,opacity}
.mf-piece{width:4px;height:4px;background:var(--mf-color);opacity:0}
.mf-grain{width:3px;height:3px;border-radius:50%;box-shadow:0 1px 0 #fff7}
.mf-pixel{width:4px;height:4px;border-radius:0}
.mf-fiber{width:13px;height:2px;border-radius:100% 12% 100% 20%;transform-origin:0 50%;background:linear-gradient(90deg,transparent,#69936b)}
.mf-shard{width:7px;height:6px;clip-path:polygon(15% 0,100% 14%,85% 100%,0 74%);background:linear-gradient(135deg,#deb994,#ad7651)}
.mf-line{background:none;border:1px solid var(--mf-line);border-left-color:transparent;border-radius:50%;transform-origin:center}
.mf-tendril{width:18px;height:4px;transform-origin:0 50%;border-radius:100% 18% 100% 30%;background:linear-gradient(#1c303c,#607a8c 35%,#0b1720 68%);clip-path:polygon(0 35%,40% 0,77% 23%,100% 65%,70% 70%,32% 100%,0 70%)}
html[data-theme=dark] .mf-tendril{background:linear-gradient(#8baabd,#233f50 35%,#0b1720 68%)}
.mf-press{border:1.5px var(--mf-edge) var(--mf-line);background:var(--mf-texture);opacity:0}
.mf-press[data-material=pixels]{border-width:2px;border-radius:5px!important;background-size:9px 100%}
.mf-press[data-material=moss]{border-bottom-width:3px;border-right-color:transparent}
.mf-press[data-material=moire]{border-style:double;border-width:3px}
.mf-press[data-material=venom]{border-bottom-width:4px;border-top-color:transparent;border-radius:45% 30% 38% 28%!important}
.mf-result-art{height:72px;display:grid;place-items:center;position:relative;margin:0 auto 6px;pointer-events:none}
.mf-emblem{display:grid;place-items:center;width:54px;height:54px;border:2px var(--mf-edge) var(--mf-line);border-radius:50%;background:var(--mf-texture),var(--panel);color:var(--ink);font:600 28px/1 system-ui,sans-serif}
html[data-material=sand] .mf-emblem{border:3px dotted var(--mf-line);box-shadow:inset 0 0 0 3px var(--panel)}
html[data-material=pixels] .mf-emblem{border-radius:5px;border-width:3px;box-shadow:4px 4px 0 color-mix(in srgb,var(--accent) 20%,transparent)}
html[data-material=moss] .mf-emblem{border-radius:42% 56% 43% 54%;border-bottom-width:4px}
html[data-material=mosaic] .mf-emblem{border-radius:13px;transform:rotate(-5deg);border-width:3px;outline:1px solid color-mix(in srgb,var(--accent) 25%,transparent);outline-offset:3px}
html[data-material=moire] .mf-emblem{border:4px double var(--mf-line);outline:1px solid color-mix(in srgb,var(--accent) 25%,transparent);outline-offset:4px}
html[data-material=venom] .mf-emblem{border-radius:43% 52% 40% 53%;border:4px solid #132733;background:linear-gradient(135deg,#223b4a,#0a1821 65%);box-shadow:inset 0 2px 0 #b9cbd367;color:#e5eff4}
[data-outcome=lose] .mf-emblem,[data-outcome=complete] .mf-emblem{opacity:.72}
.mf-record{display:inline-block;margin:0 0 12px;padding:5px 10px;border:1px var(--mf-edge) var(--mf-line);border-radius:var(--mf-curve);background:var(--mf-texture);font-size:11px;font-weight:700;color:var(--ink)}
html[data-material=moss] .mf-record{border-left:4px solid var(--accent)}
html[data-material=moire] .mf-record{border-bottom:3px double var(--mf-line)}
html[data-material=venom] .mf-record{border-bottom:3px solid var(--mf-line)}
/* Native focus indicators remain visible regardless of decoration or colour. */
:where(button,a,input,select,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:600px){.mf-result-art{height:62px}.mf-emblem{width:48px;height:48px;font-size:25px}}
@media(prefers-reduced-motion:reduce){.mf-piece,.mf-press{display:none!important}.aboba-result{animation:none!important}}
.mf-pause-backdrop{position:fixed;inset:0;z-index:999;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--page) 85%,transparent)}
.mf-pause-backdrop[hidden]{display:none!important}.mf-pause-panel{text-align:center;width:min(100%,340px)}
.mf-pause-panel button{min-height:44px;padding:10px 22px;border:1px solid var(--edge);border-radius:12px;background:var(--accent);color:var(--page);font:inherit;font-weight:700}

html[data-material] :where(button,a,input,select,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body.embedded [data-mf-pause]{display:none!important}

body[data-game=wordle] .word-v2 .word-cell.correct,body[data-game=wordle] .word-keyboard button.correct{background:#367e58;border-color:#367e58;color:#fff}
body[data-game=wordle] .word-v2 .word-cell.absent,body[data-game=wordle] .word-keyboard button.absent{background:#63756d;border-color:#63756d;color:#fff}
html[data-material] :is(.puzzle-actions,.direction-pad,.word-tabs,.word-lengths,.word-difficulties,.mahjong-toolbar,.mahjong-zoom,.loop-sizes,.flow-sizes,.play-actions,.pad,.actions,.aboba-result-actions)>button,html[data-material] .word-keyboard button,html[data-material] .word-keyboard-toggle{min-height:44px}
@media(max-width:600px){.puzzle-head{flex-wrap:wrap}.puzzle-stats{max-width:100%}.direction-pad button{width:44px;height:44px}}
html[data-material] .word-v2,html[data-material] .word-options{min-width:0;max-width:100%}
html[data-material] .word-lengths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
html[data-material] .word-lengths button{min-width:0;padding-inline:7px}
body[data-game=wordle] .play-surface{grid-template-columns:minmax(0,1fr)}
html[data-material] .word-v2{grid-template-columns:minmax(0,1fr)}
html[data-material=pixels]{--mf-edge:solid}
html[data-material=mosaic]{--mf-edge:solid}
.mf-emblem{position:relative}
html[data-material=moss] .mf-emblem::before,html[data-material=moss] .mf-emblem::after{content:"";position:absolute;width:13px;height:6px;background:var(--accent);border-radius:90% 10% 90% 10%;pointer-events:none}
html[data-material=moss] .mf-emblem::before{left:-5px;top:8px;transform:rotate(-25deg)}
html[data-material=moss] .mf-emblem::after{right:-4px;bottom:7px;transform:rotate(-25deg)}
html[data-material=moss] [data-outcome=win] .mf-emblem::before,html[data-material=moss] [data-outcome=win] .mf-emblem::after{animation:mf-leaf-grow .85s ease-out both}
html[data-material=moire] [data-outcome=win] .mf-emblem::before{content:"";position:absolute;inset:-9px;border:1px solid var(--mf-line);border-radius:50%;pointer-events:none;animation:mf-thread-settle .85s ease-out both}
html[data-material=venom] .mf-emblem::before,html[data-material=venom] .mf-emblem::after{content:"";position:absolute;width:21px;height:10px;border-bottom:3px solid var(--mf-line);border-radius:20% 70% 65% 50%;pointer-events:none}
html[data-material=venom] .mf-emblem::before{left:-13px;top:10px;transform:rotate(30deg)}
html[data-material=venom] .mf-emblem::after{right:-13px;bottom:9px;transform:rotate(210deg)}
html[data-material=venom] [data-outcome=win] .mf-emblem::before{animation:mf-tendril-left .9s ease-out both}
html[data-material=venom] [data-outcome=win] .mf-emblem::after{animation:mf-tendril-right .9s ease-out both}
html[data-material] .word-hint-button,html[data-material] .mahjong-guide button{min-height:44px}
@keyframes mf-leaf-grow{from{opacity:0;scale:.1}to{opacity:1;scale:1}}
@keyframes mf-thread-settle{0%{opacity:0;transform:scale(1.3) rotate(-8deg)}40%{opacity:.6;transform:scale(1.1) rotate(3deg)}100%{opacity:.35;transform:scale(1) rotate(0)}}
@keyframes mf-tendril-left{0%{opacity:0;transform:translate(-8px,0) rotate(5deg) scaleX(.2)}40%{opacity:1;transform:translate(-4px,0) rotate(35deg) scaleX(1.1)}100%{opacity:1;transform:rotate(30deg) scaleX(.8)}}
@keyframes mf-tendril-right{0%{opacity:0;transform:translate(8px,0) rotate(235deg) scaleX(.2)}40%{opacity:1;transform:translate(4px,0) rotate(205deg) scaleX(1.1)}100%{opacity:1;transform:rotate(210deg) scaleX(.8)}}
@media(prefers-reduced-motion:reduce){.mf-emblem::before,.mf-emblem::after{animation:none!important}}