.match-app{--primary:#b64932;--foreground:#343c37;--background:#f6f3ec;--muted:#eee9df;color:#343c37;background:radial-gradient(at 15% 30%,#eee8d980,#0000 45%),#f6f3ec;min-height:100dvh;font-family:Inter,PingFang SC,sans-serif}.match-header{border-bottom:1px solid #dedbd1;justify-content:space-between;align-items:center;max-width:1280px;height:96px;margin:auto;padding:0 42px;display:flex}.match-brand{align-items:center;gap:12px;font-size:21px;font-weight:750;display:flex}.match-brand>span{color:#fff;background:#b64932;border-radius:14px;place-items:center;width:42px;height:42px;display:grid;transform:rotate(-6deg)}.match-brand small{letter-spacing:2px;color:#787d70;margin-top:4px;font-size:9px;display:block}.match-header-actions{gap:8px;display:flex}.match-header-actions button{background:0 0;border:1px solid #dedbd1;border-radius:50%;place-items:center;width:44px;height:44px;display:grid}.match-layout{grid-template-columns:1fr minmax(320px,460px) 1fr;gap:44px;max-width:1280px;margin:45px auto;padding:0 42px;display:grid}.match-eyebrow{letter-spacing:1.6px;color:#797e70;font-size:10px;font-weight:650}.match-intro{padding-top:46px}.match-intro h1{letter-spacing:-1px;margin:20px 0;font-family:Songti SC,Noto Serif SC,serif;font-size:36px;line-height:1.6}.match-intro h1 span{color:#b64932}.match-intro>p,.match-journal p{color:#72786e;font-size:13px;line-height:2}.match-principle{grid-template-columns:24px 1fr;align-items:center;gap:18px 12px;margin:34px 0;font-size:12px;display:grid}.match-principle>span{color:#a77957;font-size:10px}.match-baseline{align-items:center;gap:16px;margin-bottom:28px;font-size:12px;display:flex}.match-intro>small{color:#777b70;font-size:10px}.match-level-title{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.match-level-title h2{margin-top:8px;font-size:21px;font-weight:650}.match-count{text-align:right;font-variant-numeric:tabular-nums;font-size:27px;font-weight:600;line-height:1.15}.match-count small{color:#74796e;margin-top:5px;font-size:10px;font-weight:400;display:block}.match-paper{background:#fffdf8;border:1px solid #e1ddd2;border-radius:25px;overflow:hidden;box-shadow:0 14px 40px #6f614b0a}.match-board-top{color:#73786e;justify-content:space-between;padding:20px 22px 0;font-size:10px;display:flex}.match-board-top>span:first-child{align-items:center;gap:7px;display:flex}.match-dot{background:#6c8d69;border-radius:50%;width:5px;height:5px}.match-board{height:360px;padding:14px 24px;overflow:hidden}.match-board .puzzle-board{aspect-ratio:auto;width:100%;height:100%}.match-board .arrow-visible{stroke-width:5.5px}.match-board .highlighted .arrow-glow{stroke:#e9bc66}.match-tray-label{color:#74796e;justify-content:space-between;margin:6px 22px 10px;font-size:10px;display:flex}.match-tray-label strong{color:#3d443d;font-size:11px}.match-tray-label strong span{margin-left:7px;font-weight:400}.match-tray{background:#eeeadf;border:1px solid #e8e1d3;border-radius:15px;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0 18px;padding:8px;display:grid}.match-slot{aspect-ratio:1;background:#e6e0d3;border-radius:9px;justify-content:center;align-items:center;gap:0;min-width:0;display:flex}.match-slot.occupied{background:#fffdf8;animation:.18s ease-out slot-arrive;box-shadow:0 2px 3px #766e5b14}.match-slot b{font-size:11px}.slot-dot{background:#bdb6a6;border-radius:50%;width:3px;height:3px}.match-tray-tight{background:#f2e3d9;border-color:#d89279}.match-status{text-align:center;color:#7b6047;justify-content:center;align-items:center;gap:6px;height:52px;padding:4px 18px;font-size:11px;line-height:1.65;display:flex}.match-controls{grid-template-columns:1fr 1fr 1.55fr;gap:10px;margin-top:16px;display:grid}.match-controls button{color:#555d51;background:#faf8f2;border:1px solid #ded9cd;border-radius:13px;justify-content:center;align-items:center;gap:7px;height:48px;font-size:12px;display:flex}.match-controls .match-primary{color:#fffdf8;background:#b64932;border-color:#b64932;box-shadow:0 4px #923b29}.match-levels{justify-content:center;gap:8px;margin-top:22px;display:flex}.match-levels button{color:#818374;background:0 0;border:1px solid #0000;border-radius:50%;place-items:center;width:40px;height:40px;font-size:11px;display:grid}.match-levels button.selected{color:#415b3d;background:#e6eadc;border-color:#b8c6a7}.match-journal{text-align:center;padding-top:75px}.match-illustration{justify-content:center;align-items:center;height:155px;margin:12px 0 24px;display:flex;position:relative}.match-illustration span{color:#ad523e;background:#e8e0ca;border:1px solid #d3c8aa;border-radius:17px;place-items:center;width:58px;height:77px;font-family:Georgia,serif;font-size:32px;display:grid;transform:rotate(-17deg)translate(10px,10px);box-shadow:3px 9px #eae6da}.match-illustration span:nth-child(2){color:#466749;z-index:1;background:#d6dfcc;transform:rotate(4deg)translateY(-8px)}.match-illustration span:nth-child(3){transform:rotate(20deg)translate(-9px,10px)}.match-illustration>svg{color:#a88442;width:20px;position:absolute;top:0;right:27%}.match-journal h3{margin:17px 0;font-family:Songti SC,serif;font-size:23px;font-weight:500;line-height:1.7}.match-journal p{font-size:12px}.match-stamp{color:#53664b;border-top:1px solid #dedbd1;width:160px;margin:32px auto 0;padding-top:24px;font-family:Georgia,serif;font-size:32px}.match-stamp small{color:#777d70;font-family:sans-serif;font-size:11px}:is(.match-app button:focus-visible,.match-app a:focus-visible){outline-offset:3px;outline:3px solid #b87046}@keyframes slot-arrive{0%{opacity:.5;transform:translateY(-7px)}to{opacity:1;transform:none}}@media (min-width:741px) and (max-width:1060px){.match-layout{grid-template-columns:1fr minmax(320px,460px);gap:24px}.match-journal{display:none}.match-intro h1{font-size:30px}}@media (max-width:740px),(max-height:540px){.match-app{height:100dvh;min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;display:flex;overflow:hidden}.match-header{flex:0 0 60px;width:100%;height:60px;padding:0 18px}.match-brand{font-size:18px}.match-brand>span{width:34px;height:34px}.match-brand small{letter-spacing:1px;font-size:8px}.match-layout{flex:1;width:100%;max-width:480px;min-height:0;margin:0 auto;padding:14px 16px 8px;display:flex}.match-intro,.match-journal{display:none}.match-play{flex-direction:column;flex:1;min-height:0;display:flex}.match-level-title{flex-shrink:0;margin-bottom:12px}.match-level-title h2{margin-top:5px;font-size:18px}.match-eyebrow{font-size:9px}.match-paper{border-radius:20px;flex-direction:column;flex:1;min-height:0;display:flex}.match-board-top{flex-shrink:0;padding:15px 16px 0}.match-board{flex:1;height:auto;min-height:0;padding:10px 18px}.match-tray-label{flex-shrink:0;margin:5px 16px 9px}.match-tray{flex-shrink:0;gap:5px;margin:0 12px;padding:6px}.match-slot svg{width:18px}.match-status{flex-shrink:0;height:48px;padding:4px 14px;font-size:10px}.match-controls{flex-shrink:0;margin-top:12px}.match-controls button{height:46px}.match-levels{flex-shrink:0;gap:9px;margin-top:10px}.match-levels button{width:40px;height:40px}}@media (max-height:620px){.match-header{flex-basis:48px;height:48px}.match-layout{padding-top:8px}.match-level-title{margin-bottom:6px}.match-level-title h2{font-size:15px}.match-board-top{padding-top:8px}.match-controls{margin-top:6px}.match-status{height:34px}.match-levels{margin-top:2px}.match-slot{aspect-ratio:auto;height:32px;max-height:32px}}@media (prefers-reduced-motion:reduce){.match-app *{transition:none!important;animation-duration:.01ms!important}}@media (min-width:600px) and (max-height:540px){.match-layout{max-width:940px;padding:8px 18px}.match-play{grid-template-rows:42px minmax(0,1fr) 46px;grid-template-columns:1fr 280px;gap:8px 18px;display:grid}.match-level-title{grid-column:1/-1;margin:0}.match-level-title h2{margin-top:2px}.match-paper{grid-column:1/-1;grid-template-rows:24px 1fr 46px 46px;grid-template-columns:minmax(0,1fr) 280px;display:grid}.match-board-top{grid-area:1/1}.match-board{grid-area:2/1/5;padding:2px 10px 10px}.match-tray-label{grid-area:2/2;align-self:end}.match-tray{grid-area:3/2;align-self:center}.match-status{grid-area:4/2;height:auto}.match-controls{grid-area:3/2;gap:6px;margin:0}.match-controls button{height:44px}.match-levels{grid-area:3/1;align-items:center;margin:0}}
