/* Arrow Flow, original responsive logic game */
.arrow-intro h1{max-width:950px}
.arrow-intro{padding-bottom:32px}
.arrow-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.78fr);gap:36px;align-items:start;margin-bottom:70px}
.arrow-panel{position:relative;overflow:hidden}
.arrow-panel::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,#216947,#89c789,#f4d688)}
.arrow-picker{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:0 0 19px}
.arrow-picker .control{flex:1;min-width:150px;margin:0}
.arrow-picker .btn{font-size:13px;padding:10px 12px;min-height:46px;box-shadow:none}
.arrow-scorebar{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 auto 16px;width:100%;max-width:500px}
.arrow-scorebar>div{border:1px solid #dce6db;background:#f5faf5;border-radius:12px;padding:10px 11px;display:flex;flex-direction:column;min-width:0}
.arrow-scorelabel{font-size:11px;color:#61786a;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.arrow-scorebar strong{font-size:22px;color:#174f36;font-variant-numeric:tabular-nums}
.arrow-grid{display:grid;grid-template-columns:repeat(var(--arrow-n,8),minmax(0,1fr));gap:3px;aspect-ratio:1;max-width:500px;width:100%;margin:auto;padding:9px;border-radius:18px;background:#ebf0e7;border:1px solid #bfd5c2;box-shadow:inset 0 3px 8px rgba(20,58,33,.09)}
.arrow-tile,.arrow-empty{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;border-radius:6px}
.arrow-tile{border:1px solid #d5e5d8;background:white;color:#174f36;font-size:clamp(19px,3vw,31px);font-weight:800;line-height:1;box-shadow:0 2px 0 #bfd7c4;touch-action:manipulation;user-select:none;transition:background .13s ease,transform .13s ease,box-shadow .13s ease}
.arrow-tile:hover{background:#daf2de;transform:translateY(-1px);box-shadow:0 3px 0 #a4cbb2}
.arrow-tile:active{transform:translateY(1px)}
.arrow-tile:focus-visible{outline:3px solid #e9ab42;outline-offset:1px;z-index:2}
.arrow-dir-0{color:#235575}.arrow-dir-1{color:#326b39}.arrow-dir-2{color:#a86c32}.arrow-dir-3{color:#664b97}
.arrow-empty{background:#dfe9dd;border:1px dashed #c8d8c7}
.arrow-hint{animation:arrow-pulse 1.4s ease-in-out infinite;border:2px solid #dbab38;background:#fff1c9!important;color:#6b4d08!important}
.arrow-blocked{animation:arrow-shake .36s ease-in-out;border:2px solid #d4594c!important;background:#ffebe7!important}
.arrow-buttons{justify-content:center}
.arrow-buttons button{min-height:43px;padding:9px 14px}
.arrow-status{max-width:500px;text-align:center;margin:15px auto 3px;min-height:40px}
.arrow-aside{padding-top:10px}
.arrow-aside h2{font-size:clamp(33px,4vw,49px);letter-spacing:-.055em;line-height:1.08;margin:14px 0 26px}
.arrow-step{display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-bottom:1px solid #d7e6d8}
.arrow-step>span{display:inline-grid;place-items:center;width:41px;height:41px;flex-shrink:0;border-radius:13px;background:#ddecdb;color:#216947;font-weight:850;font-size:14px}
.arrow-step p{color:#52685a;font-size:15px;margin:0}
.arrow-step strong{color:#182f22}
.arrow-other{margin-top:27px;padding:22px;background:#ecf5ec;border-radius:16px}
.arrow-other h3{margin:0 0 8px;font-size:20px}
.arrow-other p{margin:0;color:#4c6758}
.arrow-other a{color:#216947;text-decoration:underline;text-underline-offset:3px}
@keyframes arrow-pulse{0%,100%{box-shadow:0 0 0 0 rgba(225,174,67,.45)}50%{box-shadow:0 0 0 7px rgba(225,174,67,0)}}
@keyframes arrow-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}60%{transform:translateX(3px)}}
@media(max-width:910px){.arrow-layout{grid-template-columns:1fr;gap:24px}.arrow-aside{padding:0 8px}.arrow-aside h2{max-width:600px}.arrow-grid{max-width:480px}}
@media(max-width:520px){.arrow-layout{margin-bottom:30px}.arrow-panel{padding:18px 12px}.arrow-picker{gap:8px}.arrow-picker .control{min-width:100%}.arrow-picker .btn{flex:1;min-width:125px}.arrow-grid{padding:5px;gap:2px;border-radius:11px}.arrow-tile{border-radius:4px;font-size:clamp(17px,5vw,24px)}.arrow-scorebar>div{padding:8px 7px}.arrow-scorebar strong{font-size:18px}.arrow-buttons{gap:6px}.arrow-buttons button{font-size:12px;flex:1}.arrow-intro{padding-top:34px}.arrow-intro h1{font-size:42px}.arrow-intro p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.arrow-hint,.arrow-blocked{animation:none}.arrow-tile{transition:none}}