.match-shell{padding-block:28px 78px}
.match-back{display:inline-block;margin-bottom:16px}
.match-intro{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:24px;align-items:center;margin-bottom:25px}
.match-intro h1{margin:0 0 10px;font-size:clamp(2.7rem,7vw,5.5rem);line-height:1.02;letter-spacing:-.035em}
.match-intro p{max-width:56ch;margin:0;color:#c6d1c5;font-size:1.08rem;line-height:1.55}
.match-intro img{width:100%;height:170px;object-fit:contain;filter:drop-shadow(0 13px 20px #090c09a8)}
.match-notice{padding:15px 18px;background:#38302c;border:1px solid #967a6d;color:#f1eee5;margin:18px 0}
.match-notice[hidden],#match-content[hidden]{display:none}
.match-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.match-meta>div{background:#28312a;border:1px solid #5b6b5d;padding:10px 16px;min-width:160px}
.match-meta span{display:block;color:#b1c0af;font-size:.72rem;font-weight:900;letter-spacing:.08em}
.match-meta strong{display:block;color:#f3f2e9;font-size:1.08rem;font-variant-numeric:tabular-nums}
.match-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:20px;align-items:start}
.match-game,.match-side{min-width:0;padding:clamp(15px,3vw,30px);background:#28312a;border:1px solid #607061}
.match-game{background:radial-gradient(circle at 48% 48%,#37463b,#263029 70%)}
.match-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:15px}
.match-head h2,.match-side h2{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.025em;margin:0}
#match-state{color:#d9be9a;font-weight:800;font-size:.84rem;text-align:right}
.match-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.match-progress>span{font-size:.75rem;font-weight:900;letter-spacing:.08em;color:#c9d5c8}
.match-progress strong{color:#f1ece0;font-size:1.1rem}
.match-meter{height:10px;margin:8px 0 20px;background:#152017;border:1px solid #5b6b5d;overflow:hidden}
.match-meter span{display:block;height:100%;width:100%;background:#e5bd66;transform:scaleX(0);transform-origin:left;transition:transform .28s ease-out}
.match-board-wrap{position:relative;max-width:540px;margin:auto}
.match-board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));aspect-ratio:1;gap:clamp(2px,.65vw,5px);padding:clamp(5px,1.2vw,10px);background:#14201a;border:1px solid #6e836f;touch-action:none}
.match-board.is-animating{overflow:hidden}
.match-board.is-animating .match-cell:disabled{opacity:1}
.match-board .match-cell.is-clearing{background:#665136;border-color:#e7bd75}
.match-cell{display:grid;place-items:center;min-width:0;aspect-ratio:1;padding:1px;border:1px solid #637b65;border-radius:7px;background:#314337;cursor:pointer;transition:background .14s ease,transform .14s ease,border-color .14s ease}
.match-cell img{width:87%;height:87%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 2px #09120b8c)}
.match-cell:hover{background:#435c48}
.match-cell:focus-visible{outline:3px solid #f2ce83;outline-offset:2px;z-index:1}
.match-cell[aria-pressed="true"]{border-color:#f4cf7b;background:#5a5639;transform:scale(.93)}
.match-cell.is-hint{border-color:#ffe1a0;background:#685737;box-shadow:inset 0 0 0 2px #ffe1a0;animation:match-hint-pulse .8s ease-in-out 3}
@keyframes match-hint-pulse{50%{background:#b18a45;box-shadow:inset 0 0 0 3px #fff1c5}}
.match-cell:disabled{cursor:default;opacity:.75}
.match-board-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#142019e8;color:#f2eee1;text-align:center;padding:16px}
.match-board-cover[hidden]{display:none}
.match-board-cover img{width:min(32%,130px);height:auto;object-fit:contain}
.match-board-cover p{margin:0;font-weight:800;font-size:clamp(1.05rem,2vw,1.4rem)}
.match-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px}
.match-controls span{font-variant-numeric:tabular-nums;font-weight:900;color:#d9e3d4}
.match-controls #match-moves{margin-right:auto}
.match-controls #match-clock{color:#e8c18e}
.match-feedback{min-height:1.5em;margin:15px 0 0;color:#d2dfd0;line-height:1.5}
.match-side h2{margin-bottom:14px}
.match-side p{color:#cbd8ca;line-height:1.6}
.match-icon-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:250px;margin:20px 0}
.match-icon-strip img{width:100%;aspect-ratio:1;object-fit:contain;background:#354236;padding:5px}
.match-side .match-rule{padding-top:17px;border-top:1px solid #526453}
.match-rule strong{color:#f2d089}
.match-result{width:min(92vw,670px);max-height:calc(100dvh - 24px);overflow:auto;padding:22px;border:0;background:#29352c;color:#f1eee5;box-shadow:0 20px 36px #050805b3}
.match-result::backdrop{background:#070d09d9}
.match-result[open]{display:grid;grid-template-columns:minmax(90px,165px) 1fr;gap:22px;align-items:center}
.match-result>img{width:100%;height:auto;object-fit:contain}
.match-result h2{font-size:clamp(1.8rem,4vw,2.8rem);margin:0 0 8px}
.match-result strong{color:#e7cb83;font-size:2rem}
.match-result p{color:#d6dfd2;line-height:1.5}
.match-result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.match-result.loss strong{color:#e9b394}
@media(max-width:860px){.match-layout{grid-template-columns:1fr}.match-side{display:grid;grid-template-columns:1fr auto;gap:0 20px}.match-side h2,.match-side .match-rule,.match-side>a{grid-column:1 / -1}.match-icon-strip{grid-column:2;grid-row:2 / 4;min-width:180px;margin:0}}
@media(max-width:560px){.match-intro{grid-template-columns:1fr 90px;gap:8px}.match-intro img{height:105px}.match-intro p{grid-column:1 / -1}.match-meta>div{flex:1;min-width:95px;padding:9px}.match-meta strong{font-size:.85rem}.match-meta span{font-size:.7rem}.match-game,.match-side{padding:13px}.match-head h2{font-size:1.45rem}.match-board{gap:2px;padding:4px}.match-cell{border-radius:4px}.match-cell img{width:92%;height:92%}.match-side{display:block}.match-icon-strip{max-width:215px;margin:14px 0}.match-result[open]{grid-template-columns:1fr;text-align:center}.match-result>img{width:100px;margin:auto}.match-result-actions{justify-content:center}}
@media(max-width:350px){.match-shell{width:calc(100% - 16px)}.match-game{padding:7px}.match-board{gap:1px;padding:2px}.match-intro{grid-template-columns:1fr}.match-intro img{display:none}.match-controls .button{flex:1}.match-meta>div{min-width:85px}}
@media(prefers-reduced-motion:reduce){.match-cell,.match-meter span{transition:none}.match-cell.is-hint{animation:none}}